Question

我正在尝试让下拉菜单在悬停时不展开第一级ul，并显示下面的项目但不设置固定宽度。有任何想法吗？原则上，唯一具有菜单的导航项是“配置”选项卡。

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/

谢谢！感谢您的所有帮助！

Answer 1

如何（因为父<li>是相对的）

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

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

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

1 个答案: