> 웹 프론트엔드 > HTML 튜토리얼 > 纯css多级菜单的解决办法_html/css_WEB-ITnose

纯css多级菜单的解决办法_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:26:29
원래의
1135명이 탐색했습니다.

用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以阻止鼠标悬停的下下级显示????

高手们如何解决这个问题呢


回复讨论(解决方案)

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}


高手,一个 > 就解决问题。

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿