没有固定宽度的 CSS 下拉菜单

Question

I'm trying to get the dropdown menu to not expand the first-level ul on hover and display the items below but without setting a fixed width. Any ideas? Currently, the only nav item that has a menu is the 'Configure' tab.

 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>

I've put the code I'm working on in a fiddle here: http://jsfiddle.net/aPbV4/

Thank you! All your help is appreciated!

Answer 1

how about ( as parent <li> is relative )

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

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