html – 没有javascript的CSS菜单

发布时间:2019-12-08 整理:脚本之家
脚本之家收集整理的这篇文章主要介绍了html – 没有javascript的CSS菜单脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!
任何人都可以提供参考,或者是否可以完全依赖于创建菜单
CSS而不是一点点的JavaScript?

要求是一个下拉菜单,可以有许多孩子(子菜单).

如果像这样创建的任何东西都会与浏览器兼容吗?

任何关于这个主题的帮助将不胜感激!

编辑

感谢您的所有投入再次怀疑

这可以实现而不是使用ul li

说div跨组合,因为这可以帮助我实现一个不会改变我当前的html结构的菜单!

解决方法

诀窍是:hover伪类.
<ul class="menu">
  <li>
    <a href="...">Menu Item 1</a>
    <ul class="submenu">
      <li><a href="...">Submenu 1</a></li>
      <li><a href="...">Submenu 2</a></li>
    </ul>
  </li>
  <li>
    <a href="...">Menu Item 2</a>
    <ul class="submenu">
      <li><a href="...">Submenu 3</a></li>
      <li><a href="...">Submenu 4</a></li>
    </ul>
  </li>
</ul>

好?所以你的整个子菜单必须进入< li>它对应的主菜单项.那么对于CSS:

.submenu { display: none; }
.menu>li:hover>.submenu { display: block; }

做一些造型,完成工作.

编辑:对于另一层菜单,它非常简单.使用这个CSS:

.menu li>ul { display: none; }
.menu li:hover>ul { display: block; }

请注意,我已将.menu> li:hover替换为.menu li:hover.这告诉浏览器在主菜单下面找到所有li元素(不仅仅是直接的后代)并在悬停时显示它们的子菜单.我也摆脱了使用子菜单类,因为如果你将CSS基于后代,它并不是真正需要的.这将允许您添加任意数量的级别.

总结

以上是脚本之家为你收集整理的html – 没有javascript的CSS菜单全部内容,希望文章能够帮你解决html – 没有javascript的CSS菜单所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ” ,选择关注!
精选程序员所需精品干货内容!

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!