html - 将事件状态添加到基于 css 的水平菜单而不显示子菜单

Question

我修改了线性菜单show in the example到目前为止，根据我的需要，我没有遇到任何问题，除了我无法找到一种方法来显示与页面加载时特定页面相关的菜单，或者换句话说，我想向 li 添加事件状态> & 在此基础上显示父菜单的子菜单。

假设如果用户单击关于我们 链接，那么它应该默认显示菜单。

这是我在 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 .