Question

我们有水平的第1级和第2级导航。当第一级li悬停时，第二级ul水平显示在第一级ul之上。

当鼠标离开第一级li时，我们如何使第二级ul保持可见？这只能用CSS吗?? ??

这是CSS：

ul.ebene1{display:inline;}
ul.ebene1 li{display:inline; list-style-type:none; margin-right:2%;}

ul.ebene2{display:none;}
ul.ebene1 li:hover ul.ebene2{display:block; position:fixed; bottom:6%; width:80%; font-size:0.9em;}

HTML：

<ul class="ebene1">
    <li><a href="">NAV1</a>
        <ul class="ebene2">
            <li><a href="">Nav2</a></li>
           <li><a href="">Nav2</a></li>
        </ul>
    </li>
    <li><a href="">NAV1</a></li>
    <li><a href="">NAV1</a>
        <ul class="ebene2">
            <li><a href="">Nav2</a></li>
            <li><a href="">Nav2</a></li>
       </ul>
    </li>
    <li><a href="">NAV1</a></li>
</ul>

Answer 1

只有CSS才能做到这一点。悬停元素时会触发:hover伪类。所以当离开元素时会停止悬停效果。

您可以使用JQuery来显示子菜单。

<强> [编辑] Jquery解决方案就是这样：

HTML

<ul class="ebene1">
    <li><a href="">NAV1</a>
        <ul class="ebene2">
            <li><a href="">Nav1.1</a></li>
           <li><a href="">Nav1.2</a></li>
        </ul>
    </li>
    <li><a href="">NAV2</a></li>
    <li><a href="">NAV3</a>
        <ul class="ebene2">
            <li><a href="">Nav3.1</a></li>
            <li><a href="">Nav3.2</a></li>
       </ul>
    </li>
    <li><a href="">NAV4</a></li>
</ul>

CSS

ul.ebene1 {
    display:inline;
}
ul.ebene1 li {
    display:inline;
    list-style-type:none;
    margin-right:2%;
}
.ebene2 { 
    display:none;
    position:fixed;
    bottom:6%;
    width:80%;
    font-size:0.9em;
}

JQuery的

(".ebene1 li").mouseover( function() {
    if( $(this).children('ul').length > 0 ) // check if a ul exists in the li
    {
        $('.ebene2').hide(); // hide all submenus
        $(this).find('ul').show(); // show this submenu
    }
});

和DEMO。

将第二级导航保持在第一级li：悬停可见

1 个答案: