定位我的css菜單

Question

我正在嘗試更新我公司的網站菜單，並且我已設法完成所有操作，除非菜單在鼠標懸停時擴展其寬度，級別2和級別3列表堆疊在每個菜單上其他。我理解它是因爲我做了絕對而非相對的定位，以避免1級菜單在懸停時上下移動。任何人有任何建議，我可以如何設法顯示子菜單，並保持主菜單不移動在鼠標上？

這是我的jsfiddle代碼http://jsfiddle.net/#&togetherjs=hyRjkxLPGH。

謝謝！

Answer 1

您的小提琴有許多問題。首先，應該在<ul>標籤內的唯一元素是<li>標籤，而不是文本。其次，你幾乎正確地使用了絕對定位，但是你需要給每一個相對位置。

我已經在下面爲您提供了一個基本的（稍微剝離下來的）解決方案。您也可以在this fiddle找到它。

您可以重新插入您的樣式很容易我敢肯定，也許使用更多類和更少的CSS選擇器（你有沒有使用SCSS？）

HTML

<ul class="menubar"> 
    <li><a href="#">menu1</a> 
    <ul> 
     <li><a href="#">submenu1</a> 
     <ul> 
      <li><a href="#">submenu11</a></li> 
      <li><a href="#">submenu12</a></li> 
      <li><a href="#">submenu13</a></li> 
     </ul> 
     </li> 
     <li>submenu2 
     <ul> 
      <li>submenu21</li> 
      <li>submenu22</li> 
      <li>submenu23</li> 
     </ul> 
     </li> 
     <li>submenu3 
     <ul> 
      <li>submenu31</li> 
      <li>submenu32</li> 
      <li>submenu33</li> 
     </ul> 
     </li> 
    </ul> 
    </li> 

    <li><a href="#">menu2</a> 
    <ul> 
     <li><a href="#">submenu1</a> 
     <ul> 
      <li><a href="#">submenu11</a></li> 
      <li><a href="#">submenu12</a></li> 
      <li><a href="#">submenu13</a></li> 
     </ul> 
     </li>    
     <li>submenu2 
     <ul> 
      <li>submenu21</li> 
      <li>submenu22</li> 
      <li>submenu23</li> 
     </ul> 
     </li> 
     <li>submenu3 
     <ul> 
      <li>submenu31</li> 
      <li>submenu32</li> 
      <li>submenu33</li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

CSS

.menubar, .menubar ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
.menubar > li { 
    display: inline-block; 
    position: relative; 
} 

.menubar li ul { 
    display: none; 
} 
.menubar li:hover > ul { 
    display: block; 
    position: absolute; 
    width: 100px; 
} 
.menubar li:hover > ul > li { 
    position: relative; 
} 
.menubar > li > ul > li ul { 
    position: absolute; 
    top: 0; 
    left: 100px; 
}