html - 带有悬停的嵌套无序列表

Question

我有这个（简化的）导航：

.ctmenu {
    display: none;
    float: right;
}

li:hover > .ctmenu {
    display: inline-block;
}

<ul class="menu">
    <li>
        <span class="ctmenu">CT Menu</span>
        <a href="#">Main page</a>
        <ul class="menu sub">
            <li>
                <span class="ctmenu">CT Menu</span>
                <a href="#">Sub page</a>
            </li>
        </ul>
    </li>
</ul>

当我悬停一个 li 时，应该可以看到直接子 .ctmenu。那行得通，但我只希望鼠标当前所在的元素不显示.ctmenu。当我悬停“子菜单”时，“主页”的 .ctmenu 也可见，因为我也在悬停它。

我只喜欢 CSS 修复，但 javascript/jQuery 可以。

编辑：

我在第一个示例中犯了一个小错误，从答案中我可以看出这很重要：

.ctmenu是在结构中的之前a并带有a float:right，所以我不能使用a + .ctmenu选择器。是否有相反的等价物？

标签： htmlcss

Answer 1

试试这个：

.ctmenu { display: none; }

li a:hover + .ctmenu, .ctmenu:hover  { display: inline-block; }

<ul class="menu">
  <li>
    <a href="#">Main page</a><span class="ctmenu">C Menu 1</span>
    <ul class="menu sub">
      <li>
        <a href="#">Sub page</a><span class="ctmenu">C Menu 2</span>
      </li>
    </ul>
  </li>
</ul>