将活动状态添加到基于 css 的水平菜单不显示子菜单

Question

我已经根据我的需要修改了线性菜单 show in the example 到目前为止我没有任何问题，除了我无法找到一种方法来显示与页面加载时特定页面相关的菜单，或者换句话说，我想添加li 的活动状态，基于它的父菜单显示 thouse 子菜单。

假设如果用户点击About Us 链接，那么它应该默认显示菜单。

这是我在jsFiddle 上的示例

我的问题让读者感到困惑，我只需要在页面加载时显示特定页面的菜单我需要对 css 进行哪些更改，以便我可以在 jquery 的帮助下显示子菜单，可能仅使用 css .

我尝试了几件事，但最终搞砸了整个..

Answer 1

我会向列表元素添加一个 .active 类，该类是当前显示的页面，而不是子菜单无序列表（因为从语义上讲，它是处于活动状态的页面，而不是它的子菜单）。所以在你的标记中，你会有 <li class="active"><span class="dir"><a href="ultimate.linear-active.html">About Us</a></span> .... 并在您的样式表中添加

li.active > ul {
  visibility: visible;
}

​ 然后，您可以使用 li.active 相应地设置当前页面选项卡的样式。