带有子导航的水平 CSS 菜单 - 设置活动选项卡

Question

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

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

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

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

问题是：当我已经有一个带有.active class 的标签和我 hover 其他标签时，他们的子子导航也将有display:block ..

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

Answer 1

听起来您的 CSS 规则只需要拆分即可。 所以而不是

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

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

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