这篇文章主要介绍的内容是关于css三级下拉菜单实现的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
test /*设置通配符样式*/ *{ margin:0; padding:0;}body{ font-size:12px;}ul{ list-style:none;}a{ text-decoration:none;}/*设置二级导航样式*/ .nav { width:500px; height:30px; background-color:#b4b4b4; /*导航栏居中*/ margin:auto;}.nav ul li { width:100px; height:30px; float:left; position:relative;}.nav ul li a { display:block; width:96px; border:2px solid gray; height:26px; line-height:26px; text-align:center;}.nav ul li a:hover { background-color:yellow;}
/*设置一级导航样式*/.nav ul li ul{ display:none;}.nav ul li:hover ul{ display:block; width:100px; position:absolute; top:30px; left:0; background-color:white;}.nav ul li:hover ul li a{ display:block; width:96px; height:26px; line-height:26px; border:2px solid gray; text-align:center;}.nav ul li:hover ul li a:hover{ background-color:orange;}
/*设置三级导航样式*/.nav ul li:hover ul li ul { display:none;}.nav ul li:hover ul li:hover ul{ display:block; width:100px; position:absolute; top:0px; left:100px; background-color:#b4b4b4;}.nav ul li:hover ul li:hover ul li { width:100px; height:30px; }.nav ul li:hover ul li:hover ul li a { display:block; width:96px; height:26px; line-height:26px; border:2px solid gray; text-align:center; }.nav ul li:hover ul li:hover ul li a:hover { background-color:#00CC00;}.nav ul li:hover ul .nav_jw ul { display:none;}.nav ul li:hover ul .nav_jw:hover ul{ display:block; width:100px; position:absolute; top:0px; left:-100px; background-color:#b4b4b4;}.nav ul li:hover ul .nav_jw:hover ul li { width:100px; height:30px; }.nav ul li:hover ul .nav_jw:hover ul li a { display:block; width:96px; height:26px; line-height:26px; border:2px solid gray; text-align:center; }.nav ul li:hover ul .nav_jw:hover ul li a:hover { background-color:#00CC00;}
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
如何解决CSS滤镜同时过滤文字的问题
立即学习“前端免费学习笔记（深入）”；
css+div多步骤进度条的实现代码
以上就是css三级下拉菜单实现的方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610743.html
微信扫一扫 
支付宝扫一扫 
