2
我試圖讓下拉菜單不能展開懸停的第一層ul,並顯示下面的項目,但沒有設置固定寬度。有任何想法嗎?當然,唯一具有菜單的導航項是「配置」選項卡。沒有固定寬度的CSS下拉菜單
CSS:
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;
}
HTML:
<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/
謝謝!所有的幫助表示讚賞!
很簡單!完美地工作!謝謝! – Vikram
很高興幫助! –