Question

我为此建立了jsFiddle。我要做的是，一旦你导航到子菜单，它保持在父项目周围的填充。目前，如果你将鼠标悬停在li上，你可以看到填充。

我的CSS如下：

#access {
    margin-top: 45px;
}

#access ul#menu-top_nav {
    margin:0 0 10px 15px;
}

#access ul#menu-top_nav li {
    font-size: 15px;
    position: relative;
    display: inline-block;
}

#access ul#menu-top_nav li a {
    color: #336c82;
    padding: 10px;
}

#access ul#menu-top_nav ul {
    display: none;
}

#access ul#menu-top_nav li a:hover {
    background: #336c82;
    color: #fff;
    text-decoration: none;
}

#access ul#menu-top_nav li:hover > ul {
    display: block;
    position: absolute;
    top: 30px;
    left: -25px;
    background: #336c82;
}

#access ul#menu-top_nav ul.sub-menu li {
    display: block;
    width: 200px;
    padding: 10px;
}

#access ul#menu-top_nav ul.sub-menu li a {
    color: #fff;
    padding: 0;
}

#access ul#menu-top_nav ul.sub-menu li a:hover {
    padding: 0;
    text-decoration: underline;
}

我的HTML是：

<div role="navigation" id="access">
<ul id="menu-top_nav" class="menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17" id="menu-item-17">
        <a href="#">Our Business</a>
        <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73" id="menu-item-73"><a href="#">About Us</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72" id="menu-item-72"><a href="#">Careers</a></li>
        </ul>
    </li>
</ul>
</div>

但是进一步进入子菜单时，悬停效果会消失。

我怎样才能使父李总是有效悬停？

提前致谢。希望我已经解释得很好。

Answer 1

将#access ul#menu-top_nav li a:hover更改为#access ul#menu-top_nav li:hover a

    #access ul#menu-top_nav li:hover a{
    background: #336c82;
    color: #fff;
    text-decoration: none;
}

DEMO

HERE 是CSS下拉菜单的详细示例。

Answer 2

这看起来像是How to keep the parent menu hovered while the mouse in child menu in a dropdown

的副本

无论如何，将悬停伪类放在li上 - 更改

#access ul#menu-top_nav li a:hover {
    background: #336c82;
    color: #fff;
    text-decoration: none;
}

为：

#access ul#menu-top_nav li:hover a {
    background: #336c82;
    color: #fff;
    text-decoration: none;
}

在导航子菜单时，保持Parent li为班级

2 个答案: