CSS導航菜單在向下滑動時向右滑動

Question

我有一個導航菜單，我希望有一個子頁面的下拉菜單。我創建了它，一切都正常，只不過當頂部菜單中的頁面鏈接到右側時，當下拉菜單顯示時，我將頁面鏈接懸停在子頁面上。 我在這裏失蹤的是什麼？ 感謝您的幫助提前。

---

這裏是的jsfiddle： jsfiddle.net/AC8XK/

什麼我不是100％這樣的，因爲有很多缺失，但它表明正是我所提到的問題。

---

我設法讓菜單正常工作。正如邁克所說，解決最初的問題是，將下拉ul位置從相對改爲絕對。

至於下拉的定位，我通過使用填充頂代替頂部或邊距解決了這個問題。

感謝大家試圖幫助。

Answer 1

你在jsfiddle中提供的代碼是..有點混亂。我不得不削減很多，併爲下拉菜單生成一些基本格式。我會評論這些重要的位，但它應該或多或少地複製粘貼&。代碼是完全菜單的佈局文本 - 沒有視覺或位置樣式的東西。

重要概念：1 - 將您的LI設置爲width:auto，將li> ul設置爲position: absolute;width:100%。這樣可以進行定位，並確保個別的ul ul li位於不同的線路上。 2-您有display:none和display:block正確。或者，您也可以使用屏幕外定位來達到同樣的目的。 3-記住做ul ul {position:absolute;}允許定位子菜單相對於父母li！

HTML：

<div class="greenbar"> 
<nav> 
    <ul id="menu-navigation-menu" class="navigation"> 
     <li id="menu-item-107" class="menu-item"><a href="#">About</a> 
      <ul class="sub-menu"> 
       <li id="menu-item-116" class="menu-item"><a href="#">Terms of Use</a></li> 
       <li id="menu-item-119" class="menu-item"><a href="#">Just another link</a></li> 
      </ul> 
     </li> 
     <li id="menu-item-106" class="menu-item"><a href="#">Services</a> 
      <ul class="sub-menu"> 
       <li id="menu-item-120" class="menu-item"><a href="#">Another link again</a></li> 
      </ul> 
     </li> 
     <li id="menu-item-105" class="menu-item"><a href="#">Clients</a></li> 
     <li id="menu-item-104" class="menu-item"><a href="#">Resources</a></li> 
    </ul> 
</nav> 
</div> 

CSS：

nav ul { 
list-style-type: none; 
position: relative; 
display: inline-table; 
} 
nav ul li {float: left;} 
nav ul li a { display: block; text-decoration: none;} 
nav ul ul { 
display: none; 
position: absolute; 
width: auto; 
} 
nav ul li:hover > ul { display: block;} 
nav ul ul li { width: 100%;}