HTML/CSS菜單樣式欄沒有正確佈置

Question

我正在將網站作爲修訂工具的一部分，但是我無法讓菜單的佈局正常工作，當嘗試爲多個節創建下拉列表時同樣的列表，它們要麼彼此重疊，要麼排列到應該在的位置，注意，解決方案應該只使用HTML和CSS。

要澄清，下拉應該出現在它們各自的「標題標題」下面。

#menu a:link { 
 
    color: #C7C1C1; 
 
    text-decoration: none; 
 
} 
 
#menu a:visited { 
 
    color: #C7C1C1; 
 
    text-decoration: none; 
 
} 
 
#menu a:hover { 
 
    color: #FFFFFF; 
 
} 
 
#menu { 
 
    text-align: center; 
 
    top: 0px; 
 
    position: absolute; 
 
    margin-bottom: -61px; 
 
    font-size: 20px; 
 
} 
 
#menu ul {} #menu ul li { 
 
    display: inline; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
} 
 
#menu ul li ul { 
 
    display: none; 
 
} 
 
#menu ul li:hover ul { 
 
    display: inline-block; 
 
    top: 50px; 
 
    left: 
 
    /*when applying this makes all dropdowns stack*/ 
 
    ; 
 
    position: absolute; 
 
    background-color: #4D4D4D; 
 
    text-align: center; 
 
}

<div id="menu"> 
 
    <div> 
 
    <ul> 
 
     <li><a href="#x">Introduction</a> 
 
     <ul> 
 
      <li><a href="#xxx">Past</a> 
 
      </li> 
 
      <li><a href="#xxx">Present</a> 
 
      </li> 
 
      <li><a href="#xxx">Future</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#y">History</a> 
 
     <ul> 
 
      <li><a href="#yyy">Past</a> 
 
      </li> 
 
      <li><a href="#yyy">Present</a> 
 
      </li> 
 
      <li><a href="#yyy">Future</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#z">National Flags</a> 
 
     <ul> 
 
      <li><a href="#zzz">Past</a> 
 
      </li> 
 
      <li><a href="#zzz">Present</a> 
 
      </li> 
 
      <li><a href="#zzz">Future</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#a">International Maritime Signal Flags</a> 
 
     <ul> 
 
      <li><a href="#aaa">Past</a> 
 
      </li> 
 
      <li><a href="#aaa">Present</a> 
 
      </li> 
 
      <li><a href="#aaa">Future</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

您需要添加position: relative;父元素的子絕對定位到它：

#menu ul li{ 
    display:   inline; 
    padding-left:  30px; 
    padding-right:  30px; 
    position: relative; // IMPORTANT 
} 

，你應該只display: inline-block屬性添加到懸停#menu ul li: hover ul和造型的正常類定義中的其餘部分：（只是爲了方便）

#menu ul li ul{ 
    display:   none; 
    top:    50px; 
    position:   absolute; 
    background-color: #4D4D4D;  
    text-align:   center; 
    width: 100%; 
} 

Answer 2

設置position: relative;到<li>

#menu ul li{ 
    display:   inline; 
    padding-left:  30px; 
    padding-right:  30px; 
    position: relative; // add this 
} 

然後設置left: 0;位置<ul>

#menu ul li:hover ul{ 
    display:   inline-block; 
    top:    50px; 
    left:    0px; // Begin on the left of the li 
    position:   absolute; 
    background-color: #4D4D4D;  
    text-align:   center; 
}