今天小编跟大家讲解下有关基于CSS实现的4级下拉菜单效果代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关基于CSS实现的4级下拉菜单效果代码 的相关资料，希望小伙伴们看了有所帮助。
本文实例讲述了基于CSS实现的4级下拉菜单效果代码。分享给大家供大家参考。具体如下：
这是一款基于CSS实现的多级菜单 一共可下拉出4级 在编写此类的CSS菜单时要注意 一级的li a的hover时 设置二级菜单可见 一级的li a的hover时 设置二级,三级菜单隐藏 一级和二级的li a的hover时 设置三级和四级级菜单隐藏 一级二级菜单hover时 设定3级菜单可见 一级二级三级hover时 设置四级菜单可见 代码里已加注了丰富的注释 菜单风格如果不适合你口味的话 可自己美化一下。
运行效果截图如下：
在线演示地址如下：
http://demo.aidi.net.cn/js/2015/css-4l-fade-out-menu-style-codes/
具体代码如下：
复制代码代码如下:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title>CSS 实现4级的下拉菜单</title></head><style><!--* {margin:0px;padding:0px;}body {font-size:12px;font-family:Arial;color:#000;}a {font-size:12px;font-family:Arial;color:#000;text-decoration:none;}.menu {position:relative;width:500px;background-color:#360;}.menu ul {list-style-type:none;}.menu li { float:left;position:relative;}.menu ul ul {visibility:hidden;position:absolute;left:3px;top:20px;border:1px solid #000;}.menu ul ul ul{ visibility:hidden; position:absolute; left:122px;top:0px; border:solid 1px #999999;}.menu table {position:absolute; top:0; left:0;}.menu ul li:hover ul,.menu ul a:hover ul{visibility:visible;}.menu a{display:block;background:#360;padding:2px 10px;color:#fff;text-decoration:none;border:1px solid #360;}.menu a:hover{background:#690;color:#000;}.menu ul ul li {clear:both;text-align:left;}.menu ul ul li a{display:block;width:100px;height:15px;}.menu ul ul li a:hover{background:#690;}.menu ul ul ul li a{clear:both;text-align:left;}.menu UL LI:hover UL {VISIBILITY: visible}.menu UL A:hover UL {VISIBILITY: visible }.menu UL :hover UL UL { VISIBILITY: hidden }.menu UL :hover UL :hover UL UL { VISIBILITY: hidden }.menu UL :hover UL :hover UL { VISIBILITY: visible }.menu UL :hover UL :hover UL :hover UL { VISIBILITY: visible }.menu ul ul ul a{ background:#00CCFF;}.menu ul ul ul a:hover{ background:#0066FF;}.menu ul ul ul ul a{ background:#390;}.menu ul ul ul ul a:hover{ background:#690;}--></style><body><div class="menu"><ul><li><a href="">公司首页<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><a href="">二级菜单_01</a></li><li><a href="">二级菜单_02</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><!--第2个菜单开始--><li><a href="">公司简介<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><a href="">二级菜单_01</a></li><li><a href="">二级菜单_02</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><!--结束--><!--三级开始--><li><a href="">产品导航<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><a href="">二级菜单_01</a><!--三级子菜单--><li><a href="">二级菜单_02<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="">三级菜单_01</a></li> <li><a href="">三级菜单_02</a></li> <li><a href="">三级菜单_03</a></li> <li><a href="">三级菜单_04 <!--四级菜单开始--> <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="">四级菜单_01</a></li> <li><a href="">四级菜单_02</a></li> <li><a href="">四级菜单_03</a></li> <li><a href="">四级菜单_04</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <!--四级子菜单结束--></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><!--三级结束--><!--三级子菜单--><li><a href="">二级菜单_03<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="">三级菜单_01</a></li> <li><a href="">三级菜单_02</a></li> <li><a href="">三级菜单_03</a></li> <li><a href="">三级菜单_04 <!--四级菜单开始--> <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="">四级菜单_01</a></li> <li><a href="">四级菜单_02</a></li> <li><a href="">四级菜单_03</a></li> <li><a href="">四级菜单_04</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <!--四级子菜单结束--></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><!--三级结束--></ul></body></html>
希望本文所述对大家的css网页设计有所帮助。
来源：爱蒂网
