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

Question

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

假设用户点击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相应地设置当前页面选项卡的样式。