2013-08-01 71 views
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/

謝謝!所有的幫助表示讚賞!

回答

2

怎麼樣(如父<li>是相對的)

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

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

+0

很簡單!完美地工作!謝謝! – Vikram

+0

很高興幫助! –