CSS 下拉菜单,可见不工作

标签 css drop-down-menu visible

编辑: 以防万一以后有人发现这个,我发现解决方案是从使用 visibility: 更改为 display: ,所以在代码中

可见性:隐藏;变成显示:无; 可见性:可见;变成显示: block ;

还没有确切地知道为什么它的可见性在第 4 次嵌套时不起作用,但至少这似乎可以解决它

大家好,

我目前正在使用使用一些 CSS 和列表创建的下拉菜单。它工作正常,但由于某种原因,此菜单的第 4 级未收听可见性:隐藏;命令。根据元素检查器,元素被列为已启用,但实际上并没有这样做。

这里有一个例子:http://dev.hutchup.com/test/css-dropdown.htm

我不会过去的代码,因为它太日志了,可以在上面的链接中看到

正如您所看到的,第一个 2 级链接悬停在显示 3 级和 4 上时,它应该只显示 3,然后当滑过 3 中的 li 时,它将显示 4 级。

我知道有很多更简单的方法可以做到这一点/预建的事情,但我需要这样做,这样我就可以使用 joomla 的 ACL 组件并且不显示菜单项。

我花了好几个小时都没修好,先谢谢你了!

最佳答案

不确定,但是这么多级别的嵌套是一件可怕的事情,在当今时代,一些简单的带有后备功能的 JavaScript 可能会更好地处理它(特别是如果它有大量的嵌套级别),尽管我确实注意到了两件事;

  • 在我看来,您没有为第四层指定任何样式。您可能想添加一些以查看这是否是您的问题。
  • 你有一些看起来像 像这样;

   .moduletable_topmenu ul.menu li.item69 a {
    height: 2.5em;
   }
   */

   /*
   .moduletable_topmenu ul.menu li.item89 {
    height: 3.7em;
   } 

   .moduletable_topmenu ul.menu li.item89 a {
    height: 2.5em;
   }

这些 li.item[n] 元素要么是其他东西遗留下来的,要么是一些未实现的 future 想法,但它们肯定不适用于有问题的菜单。

关于CSS 下拉菜单,可见不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5630959/

相关文章:

html - 如何在 HTML 中的 URL 的 src 路径中上一级?

html - 居中对齐列

jsf-2 - JSF 2.0 - selectOneMenu 为空时默认为 0

javascript - 下拉 window.onclick javascript 仅适用于一个菜单

javascript - JS/J查询 : how to check whether dropdown has selected values?

android - 了解 RecyclerView 项目何时首次显示 (Android)

css - 用于 ng-repeat 的 AngularJS CSS3 动画

php - 使用一个 javascript 自定义滚动三个列表

dart - 单击按钮后使文本小部件可见

Flutter - 在额外滚动条上显示行 - 列顶部(就像 Whatsapp 存档的聊天记录)