2

我正在设计导航样式。此导航有一个子菜单下拉菜单,在该下拉菜单中可能会出现第二个下拉菜单。本质上,我有两层子导航项。

这是我的问题:我在最外层的父项上有一个悬停状态,我们称之为“关于我们”。它下方的下拉菜单显示更多链接,当我将鼠标移动到此下拉菜单中时,这些链接会激活不同的悬停状态。我的问题是“关于我们”链接上的悬停状态消失了。我希望悬停状态保持活跃。到目前为止,这个导航完全是用 CSS 完成的,没有使用 javascript,如果可能的话,我想完全坚持使用 CSS。

每个 UL 都有一个类,例如 .main-nav 用于父 UL,.main-sub-nav 用于子导航元素。

尝试有创意,我想我可以说例如(该示例假设 #ccc 是父母悬停状态的突出显示颜色:

.main-nav li a:hover {background: #ccc;}    
.main-sub-nav li a:hover .main-nav li a {background: #ccc;}

这不起作用,我假设因为我试图从子元素引用父元素,它不明白我在做什么。是否有与我上面所做的类似的方法来实现这一目标?

示例 HTML 结构:

<nav>
    <ul class="main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a>
            <ul class="main-sub-nav">
                <li><a href="#">About Sub 1</a></li>
                <li><a href="#">About Sub 2</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>

您可以在以下开发站点上完整查看此代码:http: //khill.mhostiuckproductions.com/siteLSSBoilerPlate/

请注意,当您将鼠标悬停在“关于我们”上并将鼠标向下移动到子导航时,“关于我们”的突出显示会消失。

就像我说的,我想用纯 CSS 来解决这个问题,最好不要给任何东西添加类。这变得很复杂,因为这个导航完全是用 PHP 生成的,并且添加更多的类会变得很讨厌。

4

1 回答 1

3

我认为这应该可以解决问题,

.main-nav > li:hover > a {background: #ccc;}   

演示

于 2013-01-24T17:24:03.267 回答