Question

我正在使用具有水平菜单的导航栏。在菜单的最后一个元素（选择用户类型）上，我想在用户将鼠标悬停在子菜单上时包含一个子菜单。我设法在悬停在相应项目上时显示一个子菜单，但它一直在左边，而不是在项目下面。

我包含以下代码：
HTML：

<nav class="navbar">
  <ul id="menu">
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li id="dropdown">Select User Type
          <ul>
              <li>Link 1</li>
              <li>Link 2</li>
          </ul>
      </li>
  </ul>
</nav>

CSS：

.navbar {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:30px;
  background-color: black;
  color:#fff;
}
#menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
#menu li {
  display: inline;
  height:30px;
  padding:0 15px;
  color:#F5F5F5;
  line-height:30px;
  cursor:pointer;
}
#menu li:hover {
  background-color:#F5F5F5;
  color:black;
}
#menu li ul {
  display: none;
  width: 10em;
  /* Width to help Opera out */
 background-color: #69f;
}
#menu li:hover ul, #navbar li.hover ul {
  display: block;
  position: absolute;
  margin: 0;
  padding: 0;
}
#menu li:hover li, #navbar li.hover li {
  float: none;
  background-color: #69f;
  border-bottom: 1px solid #fff;
  color: #000;
}

以下是jsFiddle链接：http://jsfiddle.net/ZT6Pq/

谢谢！

Answer 1

更新了jsFiddle

我改变的主要是“相对”的主要位置和“绝对”的子菜单位置。这会导致子菜单相对于其父项目进行定位。

#menu li {
    display: inline;
    height:30px;
    padding:0 15px;
    color:#F5F5F5;
    line-height:30px;
    cursor:pointer;
    position: relative; /* New */
}

#menu li:hover ul, #navbar li.hover ul {
    display: block;
    position: absolute;  /* New */
    top: 24px;  /* New */
    left: 0;    /* New */
    margin: 0;
    padding: 0;
}

Answer 2

添加到您的#menu li：

position: relative;

并在你的#menu li上添加top和left：hover ul，#navbar li.hover ul

top:25px;
left:0;

这里是小提琴：http://jsfiddle.net/ZT6Pq/1/

固定菜单，悬停子菜单稍微关闭

2 个答案: