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

WBOY
Freigeben: 2016-06-24 12:26:29
Original
1124 Leute haben es durchsucht

用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}


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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage