1

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

谢谢

4

2 回答 2

0

活动伪类不是这样工作的，它意味着你点击按钮的那一刻会发生什么。为了获得所需的效果，请创建一个具有与悬停类完全相同的属性的新类。并将其分配给每个网站上的不同按钮。

于 2013-06-26T16:17:26.523 回答
-1

为您的顶级菜单项服务的 li 提供逗留 id

#stay:hover { background: blue; }

显然更改为您想要的任何背景/颜色，然后对具有不同 ID 的其他菜单项执行相同的操作

您想为顶部主菜单项的 li 提供一个 ID，因为当您将鼠标悬停在子菜单上时，您实际上仍将鼠标悬停在该特定 li

于 2013-06-26T16:17:01.877 回答