2

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

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>

我把我正在处理的代码放在这里：http: //jsfiddle.net/aPbV4/

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

4

1 回答 1

2

怎么样（因为父母<li>是相对的）

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

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

于 2013-08-01T20:03:44.607 回答