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

，则可以执行此操作

＆＃13;

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

＆＃13;

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

＆＃13;

延长悬停效果我将其设置为100秒你可以随意改变它

Answer 2

CSS中没有像mouseenter / mouseleave这样的显式属性。你可以使用jquery mouseenter事件来显示内部ul元素：

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

悬停时显示子菜单，但不悬停时不显示子菜单

2 个答案: