0

我为此构建了一个jsFiddle。我要做的是，一旦您导航到子菜单，它就会在父 li 项目周围保持填充。目前，如果您将鼠标悬停在 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>

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

我怎样才能使父 li 始终有效悬停？

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

4

2 回答 2

2

更改#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;
}

演示

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

于 2013-01-30T10:38:08.687 回答
1

这看起来像如何在鼠标位于下拉菜单中的子菜单时保持父菜单悬停的副本

无论如何，将悬停伪类放在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;
}
于 2013-01-30T10:38:14.083 回答