在悬停时显示子菜单，但在不悬停时不要隐藏它。

Question

我有一个非常简单的多级菜单，如下所示：

HTML：

<ul class="multilevel">
<li>...</li>
<li>...</li>
<li>...</li>
<li>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</li>
</ul>

CSS：

.multilevel > li {position: relative; display: inline-block}
.multilevel ul {display: none; position: absolute;}
.multilevel > li:hover ul {display: block;}

当不盘旋时，我希望子菜单继续运行，而不是隐藏。是否可以只使用CSS？或者我是否需要使用jQuery (在我的例子中)。如果是，我如何使用jQuery使菜单在使用css时保持不变？

Answer 1

如果您使用opacity而不是display，您可以这样做。

​

.multilevel > li {
    position: relative;
    display: inline-block
}
.multilevel ul {
    opacity:0;
    position: absolute;
    transition:0s 100s;
}
.multilevel > li:hover ul {
    opacity:1;
    transition:0s;
}

<ul class="multilevel">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>Hover
        <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
</ul>

​

这是在延长悬停效果，我把它设置为1000，你可以随意改变它。

Answer 2

CSS.You中没有像mouseenter/mouseleave这样的显式属性，而是可以使用事件来显示内部ul元素：

$('.multilevel > li').mouseenter(function(){
    $(this).find('ul').show();
});