Question

我知道这是一个非常基本的CSS问题，但是无法理解。

当我将鼠标悬停在顶级菜单项时，会显示子菜单，但如果我尝试将鼠标悬停在子菜单项上，则子菜单会消失。

请参阅下面的菜单结构和我的css以显示子菜单

ul.sub-menu {
  position: absolute;
  left: -9999px;
  margin: 0;
  opacity: 0;
  padding: 0;
  background: #2A2A2A;
}

.menu-item:hover > ul.sub-menu  {
  left: auto;
  opacity: 1;
}

<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-109"><a href="/about">About</a>
    <ul class="sub-menu">
    	<li id="menu-item-402" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-402"><a href="/news">News</a></li>
    </ul>
</li>

Answer 1

很难绝对肯定，因为我们没有完整的代码示例，但这通常只是一个快速修复。

li {
  border: 1px solid red; /* for visual reference */
  display:inline-block; /* shrink wrap */
  position:relative; /* positioning context */
}
ul.sub-menu {
  position: absolute;
  left: -9999px;
  top:100%; /* directly below the list item parent */
  margin: 0;
  opacity: 0;
  padding: 0;
  background: #2A2A2A;
}
.menu-item:hover > ul.sub-menu {
  left: auto;
  opacity: 1;
}

<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-109"><a href="/about">About</a>
  <ul class="sub-menu">
    <li id="menu-item-402" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-402"><a href="/news">News</a>
    </li>
  </ul>
</li>

悬停子菜单项时保持子菜单打开

1 个答案: