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之前，并且有一个float:right，所以我不能使用 >a + .ctmenu 选择器。是否有相反的等价物？

Answer 1

您需要在 LI 标记后添加一个额外的 div。请检查以下示例

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

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

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