2015-08-20 5 views
1

Моя проблема заключается в том, что третий уровень меню не отображается на веб-сайте. - FISMA и HiPAA не отображаются в моем меню. они должны быть в рамках аудита и оценки, которая также по обслуживаниюэлементы подписок, которые не отображаются при зависании

/* start h_menu */ 
 

 
.h_menu4 { 
 
    float: center; 
 
} 
 
.toggleMenu { 
 
    display: none; 
 
    background: rgba(29, 82, 99, 0.22); 
 
    padding: 10px 15px; 
 
    width: 100%; 
 
    color: #fff; 
 
} 
 
.nav { 
 
    list-style: none; 
 
    *zoom: 1; 
 
} 
 
.nav:before, 
 
.nav:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.nav:after { 
 
    clear: both; 
 
} 
 
.nav ul { 
 
    list-style: none; 
 
    width: 9em; 
 
} 
 
.nav li a { 
 
    display: block; 
 
    padding: 10px 20px 40px 20px; 
 
    color: #fff; 
 
    font-size: 1em; 
 
} 
 
.nav li { 
 
    position: relative; 
 
} 
 
.nav li.active a, 
 
.nav li a:hover { 
 
    border-bottom: 10px solid #23aae1; 
 
} 
 
.nav > li { 
 
    float: left; 
 
} 
 
.nav > li > a.parent { 
 
    background: url(../images/plus.png) no-repeat right top 16px; 
 
} 
 
.nav > li > a:hover { 
 
    color: #23aae1; 
 
} 
 
.nav li ul { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 
.nav > li.hover > ul { 
 
    left: 0px; 
 
} 
 
.nav li li.hover ul { 
 
    left: 100%; 
 
    top: 0; 
 
    -webkit-transition: background .2s linear; 
 
    -moz-transition: background .2s linear; 
 
    -ms-transition: background .2s linear; 
 
    -o-transition: background .2s linear; 
 
    transition: background .2s linear; 
 
} 
 
.nav li li a { 
 
    font-size: 0.8725em; 
 
    padding: 10px; 
 
    display: block; 
 
    color: #fff; 
 
    background: rgba(73, 93, 137, 0.56); 
 
    position: relative; 
 
    z-index: 9999; 
 
    border-top: 1px solid rgba(233, 233, 233, 0.09); 
 
    -webkit-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -ms-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
} 
 
.nav li li li a { 
 
    background: #0a2334; 
 
    z-index: 200; 
 
    border-top: 1px solid #1d7a62; 
 
} 
 
.nav li li a:hover { 
 
    background: #041420; 
 
    color: #fff; 
 
    border-bottom: none; 
 
}
<ul class="nav"> 
 
    <li><a href="about.html">About Us</a> 
 
    </li> 
 
    <li><a href="solutions.html">Solutions</a> 
 
    <ul> 
 
     <li><a href="HealthcareITS.html">Healthcare IT Solutions</a> 
 
     </li> 
 
     <li><a href="GovernmenITS.html">Government IT Solutions</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="services.html">Services</a> 
 
    <ul> 
 
     <li><a href="services1.html">Risk Management</a> 
 
     </li> 
 
     <ul> 
 
     <li><a href="crsca.html">Cyber Risk & Security Controls Assessment</a> 
 
     </li> 
 
     <li><a href="csa.html">CyberSprint Advisory</a> 
 
     </li> 
 
     </ul> 
 
     <li><a href="services2.html">Audit & Assessment</a> 
 
     </li> 
 
     <ul> 
 
     <li><a href="fisma.html">FISMA</a> 
 
     </li> 
 
     <li><a href="hipaa.html">HIPAA</a> 
 
     </li> 
 
     </ul> 
 
     <li><a href="services3.html">Disaster Recovery & Business Continuity Planning</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="contact.html">Contact</a> 
 
    </li> 
 
</ul>

жаль, ребята, я совсем новичок в этом и на самом деле не используется в глубоком кодировании. Всякая помощь будет высоко оценена.

+0

Я не думаю, что у вас есть ссылка на веб-сайт? – jfoutch

+0

Вы должны создать [demo] (http://www.jsfiddle.net), чтобы люди вам помогли. – divy3993

+0

Используйте HTML (элемент) и инспектор стиля в Chrome devtools. –

ответ

0

Проблема заключалась в том, что <li><a href="services1.html">Risk Management</a></li> пришлось обернуть подменю <ul> ... </ul>.

/* start h_menu */ 
 

 
.h_menu4 { 
 
    float: center; 
 
} 
 
.toggleMenu { 
 
    display: none; 
 
    background: rgba(29, 82, 99, 0.22); 
 
    padding: 10px 15px; 
 
    width: 100%; 
 
    color: #fff; 
 
} 
 
.nav { 
 
    list-style: none; 
 
    *zoom: 1; 
 
} 
 
.nav:before, 
 
.nav:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.nav:after { 
 
    clear: both; 
 
} 
 
.nav ul { 
 
    list-style: none; 
 
    width: 9em; 
 
    padding: 0; 
 
} 
 
.nav li a { 
 
    display: block; 
 
    padding: 10px 20px 40px 20px; 
 
    color: #000000; 
 
    font-size: 1em; 
 
} 
 
.nav li { 
 
    position: relative; 
 
} 
 
.nav li.active a, 
 
.nav > li:hover > a { 
 
    border-bottom: 10px solid #23aae1; 
 
} 
 
.nav > li { 
 
    float: left; 
 
} 
 
.nav > li > a.parent { 
 
    background: url(../images/plus.png) no-repeat right top 16px; 
 
} 
 
.nav > li:hover > a { 
 
    color: #23aae1; 
 
} 
 
.nav li ul { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 
.nav > li:hover > ul { 
 
    left: 0px; 
 
} 
 
.nav li li:hover ul { 
 
    left: 100%; 
 
    top: 0; 
 
    -webkit-transition: background .2s linear; 
 
    -moz-transition: background .2s linear; 
 
    -ms-transition: background .2s linear; 
 
    -o-transition: background .2s linear; 
 
    transition: background .2s linear; 
 
} 
 
.nav li li a { 
 
    font-size: 0.8725em; 
 
    padding: 10px; 
 
    display: block; 
 
    color: #fff; 
 
    background: rgba(73, 93, 137, 0.56); 
 
    position: relative; 
 
    z-index: 9999; 
 
    border-top: 1px solid rgba(233, 233, 233, 0.09); 
 
    -webkit-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -ms-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
} 
 
.nav li li li a { 
 
    background: #0a2334; 
 
    z-index: 200; 
 
    border-top: 1px solid #1d7a62; 
 
} 
 
.nav li li a:hover { 
 
    background: #041420; 
 
    color: #fff; 
 
    border-bottom: none; 
 
}
<ul class="nav"> 
 
    <li><a href="about.html">About Us</a> 
 
    </li> 
 
    <li><a href="solutions.html">Solutions</a> 
 
    <ul> 
 
     <li><a href="HealthcareITS.html">Healthcare IT Solutions</a> 
 
     </li> 
 
     <li><a href="GovernmenITS.html">Government IT Solutions</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="services.html">Services</a> 
 
    <ul> 
 
     <li><a href="services1.html">Risk Management</a> 
 

 
     <ul> 
 
      <li><a href="crsca.html">Cyber Risk & Security Controls Assessment</a> 
 
      </li> 
 
      <li><a href="csa.html">CyberSprint Advisory</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="services2.html">Audit & Assessment</a> 
 
     </li> 
 
     <ul> 
 
     <li><a href="fisma.html">FISMA</a> 
 
     </li> 
 
     <li><a href="hipaa.html">HIPAA</a> 
 
     </li> 
 
     </ul> 
 
     <li><a href="services3.html">Disaster Recovery & Business Continuity Planning</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="contact.html">Contact</a> 
 
    </li> 
 
</ul>

Смежные вопросы