沒有固定寬度的 CSS 下拉菜單

Question

我試圖讓下拉菜單在懸停時不展開第一級ul並顯示下面的項目但不設置固定寬度。 有任何想法嗎？ 目前，唯一具有菜單的導航項是“配置”選項卡。

 nav ul { padding: 0px; margin: 0px; list-style: none; position: relative; display: block; font-family: 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; height: 25px; } nav ul:after { content: ""; clear: both; display: block; } nav ul ul { display: none; position: absolute; } nav ul li { float: left; cursor: pointer; border-left: solid 1px #AAD6EA; height: 25px; position: relative; } nav ul li div { margin-top: 5px; margin-left: 10px; margin-right: 10px; height: 100%; padding: 0px; float: left; } nav ul li:hover { background-color: #AAD6EA; color: #FFFFFF; } nav ul li:hover>ul { display: block; position: relative; z-index: 1; list-style-type: none; padding: 0; margin: 0; } nav ul ul li { background-color: #AAD6EA; border-bottom: solid 1px #0085C3; width: 100%; /* float: none; */ } nav ul ul li:hover { color: #0085c3; }

 <div style="height: 100%; float: right; margin: 0; padding: 0; "> <nav> <ul> <li> <img src="img/help.png" id="vulcanUIHelp" style="margin-top: 5px; margin-right: 10px; margin-left: 10px;" alt="" width="16" height="16" title="Get UI help" /> </li> <li> <div id="configure">Configure</div> <ul> <li> <div id="confmbpolicy">Middlebox Policy</div> </li> <li> <div>Middlebox</div> </li> </ul> </li> <li> <div id="settingsButton" title="Change system settings">Change Settings</div> </li> <li> <div id="optionsLink" title="Open or close options window">Options</div> </li> <li> <div id="help" title="Interactvely build a query">Build Query</div> </li> <li style="border-right: 0;"> <div id="logoutButton" title="Logout and close this window">Logout</div> </li> </ul> </nav> </div>

我已經把我正在處理的代碼放在了這里： http : //jsfiddle.net/aPbV4/

謝謝！ 感謝您的所有幫助！

Answer 1

怎么樣（因為父<li>是相對的）

nav ul li:hover > ul {
    display: block;
    position: absolute; 
    top:25px;
    left:0;
}

http://jsfiddle.net/aPbV4/3/