这篇文章主要介绍的内容是关于css三级下拉菜单实现的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
<!doctype html><html><head><title>test</title><style type = "text/css">/*设置通配符样式*/ *{ margin:0; padding:0;}body{ font-size:12px;}ul{ list-style:none;}a{ text-decoration:none;}</p><p>/*设置二级导航样式*/ .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;}</p><p>/*设置一级导航样式*/.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;}</p><p>/*设置三级导航样式*/.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;}</p><p></style></head><body><p class = "nav"><ul><li><a href = "#">一级导航</a> <ul> <li><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> <li><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> <li><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> </ul></li><li><a href = "#">一级导航</a> <ul> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> </ul></li><li><a href = "#">一级导航</a> <ul> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> </ul></li><li><a href = "#">一级导航</a> <ul> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> </ul></li><li><a href = "#">一级导航</a> <ul> <li class="nav_jw"><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> <li class="nav_jw"><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> <li class="nav_jw"><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> </ul></li></ul></p></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
如何解决css滤镜同时过滤文字的问题
css+div多步骤进度条的实现代码
以上就是css三级下拉菜单实现的方法的详细内容。