javascript - 带 Subnav 的水平 CSS 菜单 - 设置事件选项卡

Question

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

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

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

当它处于事件状态时，我希望它看起来与悬停时一样，也是 subnav将是可见的，因为 :hover和 .active在 topnav 项上激活 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 }