html - 悬停的嵌套无序列表

我有这个（简体）导航：

.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选择器。还有另一种方法吗？

最佳答案

您需要在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>

关于html - 悬停的嵌套无序列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55000085/