如何在父母LI下對齊下拉菜單UL？

因此，我將一個CSS下拉菜單添加到網站，但是我無法正確顯示它。如何在父母LI下對齊下拉菜單UL？

有問題的網站在這裏>http://www.grimeforum.com/ 當你將鼠標懸停在「新聞」LI上時，孩子UL顯得被壓扁。

我已經花了幾個小時搞亂位置，但它顯示在正確的位置，但很壓扁，或者它漂浮在左邊（但沒有壓扁）。

當我從

#menu-nav li { 
float: left; 
position: relative; 
}

刪除

position: relative;

它appers unsquashed，而是向左浮動父李之外。

任何想法？

這裏是小提琴 - http://jsfiddle.net/sCW9A/ 刪除postition：相對從線463

來源

2013-10-11 JMD

對於我們來幫助診斷您的問題，請發佈重現您的問題*所需的最小（[SSCCE]（http://sscce.org/））代碼（HTML和CSS）*，以及演示站點在那裏我們可以看到，編輯和修改有問題的代碼，如[JS Fiddle]（http://jsfiddle.net/），[JS Bin]（http://jsbin.com/）等。 –

我檢查了FF，這對我來說很好。菜單做了一些奇怪的懸停效果，但它下降。你可以發佈你的瀏覽器嗎？ – Cam

例如，「即將發佈的版本」分爲兩行而不是一行。此外，懸停效果意味着是兒童LI的完整背景，而不是3/4。 – JMD

給它一個寬度175px爲我工作。

好吧，我得到了問題。首先改變#menu-nav li到#menu-nav>li，因爲你不希望所有李鴻章爲float，在菜單導航離開其次這是你的子菜單

white-space: nowrap;

來源

2013-10-11 21:23:51

我不能給它一個靜態寬度，因爲其他菜單的其他項目的尺寸會更大。我需要有流體寬度。 – JMD

如果有效，請檢查更新後的答案。 –

謝謝，第一位工作，但在你發佈這個之前計算出白色空間的技巧時刻！無論如何，我都會將你的答案標記爲答案。 – JMD

的a元素必須是一個具有display: block和padding下添加錨點。

#menu-nav ul li { 
    padding: 0; 
} 

#menu-nav ul li a { 
    width: 100%; 
    padding: 0 15px; 
    display: block; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    min-width: 180px; 
}

來源

2013-10-11 21:29:18

嗯，學到了新的東西。

增加了white-space: nowrap;到#menu-nav ul li a{和hey presto，在使用多個字頁標題時不需要 ，也沒有更多的佈局問題。

不是一個真正的修復，而是一種解決方法，直到我學會更好的代碼我猜...！

來源

2013-10-11 21:58:46 JMD

如何在父母LI下對齊下拉菜單UL？

回答

相關問題