带子窗口的水平CSS菜单 - 设置活动选项卡

Question

我正在使用一些css菜单，它是这样的： http://www.sohtanaka.com/web-design/examples/horizontal-subnav/

唯一的区别是他只使用简单的链接作为subnav，我为每个topnav标签使用<ul class="subnav">。

我创建了一个css类.active并将其属性设置为#topnav li:hover

当它处于活动状态时，我希望它看起来与悬停时一样，subnav也会显示，因为 topnav上的:hover和.active 项目激活 subnav 的显示属性。

问题是：当我已经有一个包含.active类的标签并且我将其他标签悬停时，他们的子子标题也会有 display：block ..

我想要一个完全不依赖于javascript导航的解决方案。但是js可以用来显示什么是活跃的，因为它对导航并不重要..

Answer 1

听起来你的CSS规则只需要分开。而不是

.active, #topnav li:hover { rules here }

仅复制.active所需的属性并将其拆分：

#topnav li:hover { rules here }
.active { subset of rules here }