0

我们有水平的 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>
4

1 回答 1

0

你不能只用 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。

于 2013-09-06T09:26:33.840 回答