带有悬停子菜单的固定菜单有点关闭

Posted 2023-05-08

【中文标题】带有悬停子菜单的固定菜单有点关闭

【英文标题】：Fixed menu with hover submenu a bit off

【发布时间】：2013-11-30 19:31:13

【问题描述】：

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

我包含以下代码： 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/

谢谢！！

【参考方案1】：

更新jsFiddle

我所做的只是将主 li 位置更改为“相对”，将子菜单位置更改为“绝对”。这会导致子菜单相对于其父 li 项目定位。

#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;

【参考方案2】：

添加到您的#menu li：

position: relative;

并将顶部和左侧添加到您的#menu li:hover ul、#navbar li.hover ul

top:25px;
left:0;

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