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!
how about ( as parent <li>
is relative )
nav ul li:hover > ul {
display: block;
position: absolute;
top:25px;
left:0;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.