Question

我正在尝试获取活动的CSS下拉菜单标题，以便在选择时更改颜色。当你将鼠标悬停在它上面时它会发生变化，但是当你点击它或从它的菜单中选择一个项目时我希望它保持高亮显示。

我的html在下面（全部在div id =“menu”中）：

<html>

<div id="menuspacer">  

<ul class="drop">

<li><a href="/services" class="active">Services</a>

        <ul>
            <li><a href="/services/1">1</a></li>
            <li><a href="/services/2">2</a></li>    
            <li><a href="/services/3">3</a></li>
            <li><a href="/services/4">4</a></li>


        </ul>
</li>

<li><a href="/products" class="active">Products</a>  

    <ul>
            <li><a href="/products/1">1</a></li>
            <li><a href="/products/2">2</a></li>
            <li><a href="/products/3">3</a></li>
            <li><a href="/products/4">4</a></li>

        </ul>

</li>

<li><a href="/contact" class="active">Contact</a></li>      

</ul>

</div id="menuspacer">  

</html>

我的CSS看起来像这样：

#menu { margin: 0 auto; padding:0px; text-align:center; vertical-align: top; } 

#menuspacer {position: relative; display:inline-block; margin:0 auto; vertical-align: top; }

ul.drop a {color: #fff; font: arial, helvetica, sans-serif; font-size: 16px; text-decoration: none; display:block;}
ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border: 0px solid #fff; background: #555; color: #fff;}
ul.drop { position: relative; z-index: 597; }
ul.drop li { text-align:left; position:relative;  padding: 8px 20px; float:left;}
ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #1e7c9a;}
ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 150px; background: #555; border: 2px solid #000;  }
ul.drop ul li { float: none; }
ul.drop ul ul { top: -2px; left: 100%; }
ul.drop li:hover > ul { visibility: visible }

菜单工作正常，但我无法弄清楚如何使用a.active来突出显示菜单。

由于

Answer 1

Active伪类不能像那样工作，它意味着你点击按钮时会发生什么。为了获得所需的效果，创建一个具有与悬停类完全相同的属性的新类。并将其设置为每个网站上的不同按钮。

Answer 2

将您的顶级菜单项服务的li留给

#stay:hover { background: blue; }

显然改变你想要的任何背景/颜色，然后对具有不同ID的其他菜单项做同样的事情

你想给顶部主菜单项的li一个ID，因为当你将鼠标悬停在子菜单上时，你实际上仍然是在那个特定的li上面盘旋

CSS高亮菜单

2 个答案: