Question

我有下拉菜单。当我悬停主菜单项（示例页面）时，我可以看到所有下拉菜单，但我只想查看关于子菜单

＆＃13;

li.menu-item.dropdown .dropdown-menu {
  position: absolute;
  top: 70px;
  visibility: hidden;
  margin-top: 0;
}

li.menu-item.dropdown:hover .dropdown-menu {
  display: block;
}

li.menu-item.dropdown:hover .dropdown-menu {
  visibility: visible;
}

＆＃13;

<li class="menu-item menu-item-has-children dropdown">
  <a title="Sample Page" href="#">Sample Page <span class="caret"></span></a>
  <ul role="menu" class=" dropdown-menu">
    <li class="menu-item dropdown">
      <a title="About" href="#">About</a>
      <ul role="menu" class="dropdown-menu">
        <li class="menu-item">
          <a title="Image Alignment" href="#">Image Alignment</a>
        </li>
      </ul>
    </li>
  </ul>
</li>

＆＃13;

Answer 1

使用＆gt;选择

li.menu-item.dropdown:hover > .dropdown-menu {
    display: block;
}

li.menu-item.dropdown:hover > .dropdown-menu {
    visibility: visible;
}

Answer 2

使用直接子选择器

li.menu-item.dropdown:hover > .dropdown-menu {
    visibility: visible;
}

这是jsfiddle

供参考阅读此answer

显示下拉菜单

2 个答案: