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

标签 html css drop-down-menu html-lists

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

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

这是我在 jsFiddle 上的例子

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

我尝试了一些东西,但最终把整个事情搞砸了..

最佳答案

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

li.active > ul {
  visibility: visible;
}

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

关于html - 将事件状态添加到基于 css 的水平菜单而不显示子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14102160/

相关文章:

mysql - 使用 JSON 动态下拉 AngularJS 和数据库

html - 如何将 bootstrap 网格列一个一个地堆叠在另一个下方而不是一个并排地堆叠?

html - div 上的圆 Angular 用作更大 div 的入口 - 呈现错误或我的错误?

html - 如何使用 css 使子菜单显示在主菜单旁边而不是在其下方?

css - Flex4中看似简单的换肤问题;风格给人迪斯科效果

css - IE8 - 带有不透明度的 div 中的圆 Angular

javascript - 第一次单击 ATOM HTML 预览后下拉菜单自动关闭(不是浏览器)

html - CSS 气泡在 Firefox 中不起作用

jquery - 如何设置 "absolute text bottom"以便进一步的文本向上扩展?

jquery - 在悬停时创建扩展导航栏