サブメニューが表示されないのはなぜですか？

Question

私はウェブサイトのナビゲーションバーで作業していますが、特にサブメニューに問題があります。私は、1つのサブメニューしか表示されないことに気づいたが、残りは「隠されている」。

たとえば、サブメニューは "Resources For"と表示され、 "Basic Rights"、 "Health"、 "Educators"などの "Resources and Support"の下には表示されません。サブメニューは、メインタブの「プログラム」の下にある「奨学金」のような他のタブにも表示されません。なぜサブメニューが表示されないのか分かりません。誰かが大いに感謝することができれば助けてください。ここで

はlive exampleです：ここでは

はHTMLです：

 <!-- Sticky Navigation --> 
<div class="nav-wrapper"> 
      <ul> 
       <li> 
        <a href="#">ABOUT US</a> 
        <ul> 
         <li><a href="story.html">OUR HER-STORY</a></li> 
           <ul class ="submenu"> 
            <li><a href="./resources/academic/academics.html">ACADEMICS</a></li> 
            <li><a href="./resources/health/health.html">HEALTH</a></li> 
            <li><a href="./resources/parentingchildcare/parentingchildcare.html">PARENTING &amp; CHILDCARE</a></li> 
            <li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li> 
            <li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL &amp; DATING VIOLENCE</a></li> 
            <li><a href="./resources/support/support.html">HOW TO SUPPORT A FRIEND</a></li> 
           </ul> 
         <li><a href="why.html">WHY A WOMEN'S CENTER?</a></li> 
         <li><a href="space.html">LEARN ABOUT OUR SPACE</a></li> 
         <li><a href="staff.html">MEET OUR STAFF</a> 
         <li><a href="contact.html">CONTACT US</a></li> 
        </ul> 
       </li> 

       <li> 
        <a href="#">RESORUCES &amp; SUPPORT</a> 
         <ul> 
          <li><a href="./resources/index.html">RESOURCES FOR</a> 
           <ul class ="submenu"> 
            <li><a href="./resources/academic/academics.html">ACADEMICS</a></li> 
            <li><a href="./resources/health/health.html">HEALTH</a></li> 
            <li><a href="./resources/parentingchildcare/parentingchildcare.html">PARENTING &amp; CHILDCARE</a></li> 
            <li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li> 
            <li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL &amp; DATING VIOLENCE</a></li> 
            <li><a href="./resources/support/support.html">HOW TO SUPPORT A FRIEND</a></li> 
           </ul> 
          <li><a href="rights.html">BASIC RIGHTS</a></li> 
           <ul class ="submenu"> 
            <li><a href="./resources/academic/academics.html">ACADEMICS</a></li> 
            <li><a href="./resources/health/health.html">HEALTH</a></li> 
            <li><a href="./resources/parentingchildcare/parentingchildcare.html">PARENTING &amp; CHILDCARE</a></li> 
            <li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li> 
            <li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL &amp; DATING VIOLENCE</a></li> 
            <li><a href="./resources/support/support.html">HOW TO SUPPORT A FRIEND</a></li> 
           </ul> 
          <li><a href="health.html">HEALTH</a></li> 
           <ul class ="submenu"> 
            <li><a href="./resources/academic/academics.html">ACADEMICS</a></li> 
            <li><a href="./resources/health/health.html">HEALTH</a></li> 
            <li><a href="./resources/parentingchildcare/parentingchildcare.html">PARENTING &amp; CHILDCARE</a></li> 
            <li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li> 
            <li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL &amp; DATING VIOLENCE</a></li> 
            <li><a href="./resources/support/support.html">HOW TO SUPPORT A FRIEND</a></li> 
           </ul> 
          <li><a href="educators.html">FOR EDUCATORS</a></li> 
            <ul class ="submenu"> 
            <li><a href="./resources/academic/academics.html">ACADEMICS</a></li> 
            <li><a href="./resources/health/health.html">HEALTH</a></li> 
            <li><a href="./resources/parentingchildcare/parentingchildcare.html">PARENTING &amp; CHILDCARE</a></li> 
            <li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li> 
            <li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL &amp; DATING VIOLENCE</a></li> 
            <li><a href="./resources/support/support.html">HOW TO SUPPORT A FRIEND</a></li> 
            </ul> 
         </ul> 
       </li> 

       <li> 
        <a href="#">PROGRAMS</a> 
         <ul> 
          <li><a href="community.html">COMMUNITY EVENTS</a></li> 
          <li><a href="scholarships.html">SCHOLARSHIPS</a></li> 
           <ul class ="submenu"> 
            <li><a href="./resources/academic/academics.html">ACADEMICS</a></li> 
            <li><a href="./resources/health/health.html">HEALTH</a></li> 
            <li><a href="./resources/parentingchildcare/parentingchildcare.html">PARENTING &amp; CHILDCARE</a></li> 
            <li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li> 
            <li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL &amp; DATING VIOLENCE</a></li> 
            <li><a href="./resources/support/support.html">HOW TO SUPPORT A FRIEND</a></li> 
           </ul> 
          <li><a href="http://wrrclibrary.ucdavis.edu/researcher#_">JOY FERGODA LIBRARY (ALEXANDRIA)</a></li> 
         </ul> 
       </li> 

       <li> 
        <a href="#">COLLABORATIONS</a> 
         <ul> 
          <li><a href="request.html">REQUEST A WORKSHOP</a></li> 
          <li><a href="cosponsor.html">CO-SPONSORSHIPS &amp; COLLABORATIONS</a></li> 
         </ul> 
       </li> 

       <li> 

       </li> 

      </ul> 
     </div> 
     </div> 

そして、ここでは、CSSです：

/* Navigation Bar */ 
/* Styles color and interaction, as well as continuous position on scroll. */ 
.nav { 
    position: relative; 
    color: white; 
    background: -webkit-linear-gradient(#182B52, #1D355E); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(#182B52, #1D355E); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(#182B52, #1D355E); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(#182B52, #1D355E); /* Standard syntax (must be last) */ 
    box-shadow: 0 0 10px 0px black; 
    position: -webkit-sticky; 
    z-index: 1; 
} 
.nav button { 
    padding: 10px; 
    background: #182B52; 
    color: white; 
    border-style: solid; 
    border-top-style: none; 
    border-color: white; 
    border-width: 1px; 
    margin-left: 47%; 
    margin-bottom: 15px; 
    } 
.nav button:hover { 
    background: #D3B663; 
    } 
.nav-wrapper { 
    width: 100%; 
    margin: 0 auto; 
    text-align: left; 
    } 
.nav ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    position: relative; 
    } 
.nav ul li { 
    display: inline-block; 
    } 
.nav ul li:hover{ 
    background-color: #1D355E; 
    } 
.nav ul li a,visited { 
    color: white; 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
    } 
.nav ul li a:hover { 
    color: white; 
    text-decoration: none; 
    } 
.nav ul li:hover > ul { 
    display: block; 
    } 
.nav ul ul { 
    display: none; 
    position: absolute; 
    background-color: rgba(29, 53, 94, .75); 
    } 
.nav ul ul li { 
    display: block; 
    text-align: left; 
    } 
.nav ul ul li a,visited { 
    color: white; 
    } 
.nav ul ul li a:hover { 
    color: #D3B663; 
    display: block; 
    } 
.nav ul.submenu{ 
    display: none; 
    position: absolute; 
    left: 100%; 
    top: 0; 
    width: 180px; 
} 
.nav ul.submenu li { 
    text-align: center; 
    color: white; 
} 

.nav li:hover ul.submenu:hover { 
    color: #D3B663; 
    display: block; 
    } 

.nav-wrapper img { 
    float: right; 
    height: 75px; 
    padding-right: 70px; 
    } 
.sticky { 
    position: fixed; 
    width: 100%; 
    left: 0; 
    top: 0; 
    z-index: 100; 
    border-top: 0; 
} 
.nav form { 
    position: absolute; 
    right: 0; 
    padding-right: 75px; 
    margin-top: -18px; 
    } 
.nav input { 
    border: solid; 
    border-color: white; 
    border-width: 1px; 
    color: white; 
    background-color: #182B52; 
    padding: 6px; 
    padding-top: 8px; 
    } 
.nav input:hover { 
    background: #1D355E; 
    } 

Answer 1

彼らはすべての不適切だけ異なる方法で（ラップされているためです

<li><a href="./resources/index.html">RESOURCES FOR</a> <!-- no closing li like the others--> 
    <ul class ="submenu"> 
     <li></li> 
</ul> 
<!-- which means that the submenu^^ is still inside it --> 
<li><a href="rights.html">BASIC RIGHTS</a></li> <!-- closing li --> 
    <ul class ="submenu"> 
     <li></li> 
    </ul> 
    <!-- this submenu^^ is not in the li, which means that none of the CSS applies since it is not 'li ul.submenu'. It is only 'ul.submenu' --> 

修正するにはul.submenuをliタグで囲みます。

<li><a href="rights.html">BASIC RIGHTS</a> 
    <ul class ="submenu"> 
     <li></li> 
    </ul> 
</li><!-- closing li down here-->