Maison > interface Web > tutoriel HTML > le corps du texte

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

WBOY
Libérer: 2016-06-24 12:26:29
original
1096 Les gens l'ont consulté

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


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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!