サブサブメニューがその親の右に揃っていないのはなぜですか？

Question

私はウェブサイトのナビゲーションバーで作業していますが、特にサブサブメニューに問題があります。私は、サブメニューが適切な境界線にある親と正しく整列していないことに気付きました。実際、それらのすべてがメインナビゲーションバーの上部に揃えられています。

たとえば、「基本的な権利」および「私たちの空間について学ぶ」のサブサブメニューは、親の隣に適切に配置されているのではなく、一番上に表示されています。なぜ誰がこのことが起こっているのか説明できるなら、それはすばらしいことでしょう。どうもありがとうございます！ここで

はlive example次のとおりです。ここで

はHTMLです：

 <!-- Navigation Bar --> 
    <div class="nav"> 


     <!-- Quick Close --> 
     <button id="get-away">QUICK CLOSE</button> 


     <!-- Search Bar 
     <form action="./search.php" method="get"> 
      <input type="text" name="input" size="40px"/> 
      <input type="submit" value="SEARCH"/> 
     </form> --> 


      <!-- Sticky Navigation --> 
    <div class="nav-wrapper"> 
     <ul> 
      <li> 
       <a href="#">ABOUT US</a> 
       <ul> 
     <li><a href="story.html">OUR HER-STORY</a></li> 
        <li><a href="why.html">WHY A WOMEN'S CENTER?</a></li> 
        <li><a href="space.html">LEARN ABOUT OUR SPACE</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> 
        <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> 
         </li> 
         <li><a href="rights.html">BASIC RIGHTS</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> 
         <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> 
     </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

これを修正するには、.nav ul ul liにposition: relative;を追加してください。

.nav ul ul li { 
    display: block; 
    text-align: left; 
    position: relative; /* <-- Add this */ 
} 

JSFiddle

Answer 2

は、あなたのCSSにこれを追加し、それが正常に動作します！

.nav-wrapper > ul > li > ul > li { 
    position:relative; 
    } 

作業fiddle

このアウトをチェックして、私はあなたのフィードバックを知ってみましょう。ありがとう！