基于CSS实现的4级下拉菜单效果代码

本文实例讲述了基于CSS实现的4级下拉菜单效果代码。分享给大家供大家参考。具体如下：

这是一款基于CSS实现的多级菜单，一共可下拉出4级，在编写此类的CSS菜单时要注意，一级的li，a的hover时，设置二级菜单可见，一级的li，a的hover时，设置二级,三级菜单隐藏，一级和二级的li，a的hover时，设置三级和四级级菜单隐藏，一级二级菜单hover时，设定3级菜单可见，一级二级三级hover时，设置四级菜单可见，代码里已加注了丰富的注释，菜单风格如果不适合你口味的话，可自己美化一下。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/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
/*一级的li，a的hover时，设置二级菜单可见*/
}
.menu UL :hover UL UL {
VISIBILITY: hidden
/*一级的li，a的hover时，设置二级,三级菜单隐藏*/
}
.menu UL :hover UL :hover UL UL {
VISIBILITY: hidden
/*一级和二级的li，a的hover时，设置三级和四级级菜单隐藏*/
}
.menu UL :hover UL :hover UL {
VISIBILITY: visible
/*一级二级菜单hover时，设定3级菜单可见*/
}
.menu UL :hover UL :hover UL :hover UL {
VISIBILITY: visible
/*一级二级三级hover时，设置四级菜单可见*/
}
.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网页设计有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！