纯css多级菜单的解决办法_html/css_WEB-ITnose
程序员文章站
2022-06-13 13:53:08
...
用ul li做一个无限级下拉菜单
css写 #nav ul li ul{ display:none}
#nav ul li:hover ul{ display:bock}
这样的话鼠标悬停到一级菜单就会展开二级及它的三四五六七八九级全部子菜单
只好再写 #nav ul li:hover ul li ul{ display:none}
如果有几十级 岂不是要傻乎乎的写 #nav ul li ul li ul ... li:hover ul li ul以阻止鼠标悬停的下下级显示????
高手们如何解决这个问题呢
css写 #nav ul li ul{ display:none}
#nav ul li:hover ul{ display:bock}
这样的话鼠标悬停到一级菜单就会展开二级及它的三四五六七八九级全部子菜单
只好再写 #nav ul li:hover ul li ul{ display:none}
如果有几十级 岂不是要傻乎乎的写 #nav ul li ul li ul ... li:hover ul li ul以阻止鼠标悬停的下下级显示????
高手们如何解决这个问题呢
回复讨论(解决方案)
js来解决 纯css有兼容问题,毕竟hover 只有a在所有浏览器下支持
http://bbs.csdn.net/topics/390686370
http://jingyan.baidu.com/article/9f63fb91f5e897c8400f0e06.html 多级的CSS
http://www.wzsky.net/html/Website/CSS/113149.html
#nav li ul{ display:none}
#nav li:hover>ul{ display:bock}
#nav li ul{ display:none}
#nav li:hover>ul{ display:bock}
高手,一个 > 就解决问题。
下一篇: Laravel 控制器中如何调用其他方法
推荐阅读
-
一款纯css3实现的响应式导航_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
自学篇之js 提取复选框和单选框的值 和纯css的3D按钮_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
关于两个div高度保持一致的(css+js)两种解决办法_html/css_WEB-ITnose
-
简单的单级下拉菜单实现_html/css_WEB-ITnose
-
二级菜单下拉被遮挡的问题_html/css_WEB-ITnose
-
纯CSS3实现漂亮的价格表样式代码_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
基于CSS3制作的鼠标悬停动画菜单_html/css_WEB-ITnose