我正在尝试获取活动的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保持菜单突出显示。
谢谢
最佳答案
活动伪类不能那样工作，这意味着单击按钮后会发生什么。为了获得理想的效果，请创建一个新类，该类具有与悬停类完全相同的属性。并将其分配给每个网站上的其他按钮。
关于javascript - CSS高亮菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17325254/