2013-08-01 35 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

很高兴帮助! –