CSS 高亮菜单答案

【问题标题】：CSS highlight menuCSS 高亮菜单
【发布时间】：2013-06-27 00:35:41
【问题描述】：

我正在尝试让活动的 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 来保持菜单突出显示。

谢谢

【问题讨论】：

这里是代码：jsfiddle.net/derekstory/wBtXP
我不清楚您所说的“保持菜单突出显示”是什么意思 - 现在单击链接只会离开页面。
也许您应该在后端为下一页所需的活动菜单项添加一个类。或者你会为页面加载添加更多的 javascript 行为吗？
#menuspacer ul.drop li.active { background-color: red; } 并在顶部菜单中添加一个活动类
您想要活动（使用当前页面）