DIV+CSS 级联上拉菜单 多级上拉菜单
日期：2014-05-17 浏览次数：20895 次
DIV+CSS 级联下拉菜单 多级下拉菜单
很多人在做web的级联下拉菜单时，常常利用Javascript来写，这里强烈不推荐使用这种方法，原因有两个：
1.必须利用onmouseover和onmouseout函数，效率先不说，非常复杂。尤其是设置到多级菜单的时候，需要利用递归，难度很大。
2.兼容性太差。写完的级联菜单在ie下正常，在Firefox就跑样了，同样在Firefox正常，在ie下就走样了，最后需要根据浏览器写两份Javascript，苦啊~~~。
这里推荐利用css生成下来菜单。方法直接，兼容性好，需要写Javascript代码。生成后的效果图如下图：
![]()
css级联菜单最重要的是下面两段代码：
它的作用就是：鼠标经过一级菜单的时候二级菜单不透明，否则二级菜单透明，从而达到级联菜单的效果，很简单吧。 当然要想把样式做的话少些，还是要自己花些心思的。
下面是完整代码，附件也是完整代码。
很多人在做web的级联下拉菜单时，常常利用Javascript来写，这里强烈不推荐使用这种方法，原因有两个：
1.必须利用onmouseover和onmouseout函数，效率先不说，非常复杂。尤其是设置到多级菜单的时候，需要利用递归，难度很大。
2.兼容性太差。写完的级联菜单在ie下正常，在Firefox就跑样了，同样在Firefox正常，在ie下就走样了，最后需要根据浏览器写两份Javascript，苦啊~~~。
这里推荐利用css生成下来菜单。方法直接，兼容性好，需要写Javascript代码。生成后的效果图如下图：
css级联菜单最重要的是下面两段代码：
#nav li ul {
opacity: 0; <!--默认二级菜单不显示，即ul透明，不显示。-->
position: absolute;
left: 0;
background: #63867f;
list-style-type: none;
}
#nav li:hover ul {
opacity: 1; <!--鼠标经过一级菜单时，二级菜单不透明，即ul不通透，从而显示。-->
}
它的作用就是：鼠标经过一级菜单的时候二级菜单不透明，否则二级菜单透明，从而达到级联菜单的效果，很简单吧。 当然要想把样式做的话少些，还是要自己花些心思的。
下面是完整代码，附件也是完整代码。
<!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=gb2312" />
<title>title</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
html,body{
background:#ccc;
}
#nav {
list-style-type: none; <!--如果没有这句代码，ul就会出现默认样式。-->
height: 40px;
padding: 0;
margin: 0;
}
#nav li {
float: left;
position: relative !important; <!--如果没有这句代码，li菜单位置就会出现在最左边。-->
padding: 0;
line-height: 40px;
}
#nav li a {
display: block ; <!--如果没有这句代码，菜单会挤在一起。--> ;
width:120px;
color: #fff;
text-decoration: none;
background: #5a8078;
}
#nav li a:hover {
color: #a3f1d7;
}
#nav li ul {
opacity: 0; <!--默认二级菜单不显示，即ul透明，不显示。-->
position: absolute;
left: 0;
background: #63867f;
list-style-type: none;
}
#nav li:hover ul {
opacity: 1; <!--鼠标经过一级菜单时，二级菜单不透明，即ul不通透，从而显示。-->
}
#nav li ul li {
float: none ;
height: 0;
line-height: 0;
}
#nav li:hover ul li {
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<ul id="nav">
<li><a target="_blank" href="http://kutoku.com">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a style="background:#a5903c;" target="_blank" href="http://kutoku.com">桌面</a></li>
<li><a style="background:#a5903c;" target="_blank" href="http://kutoku.com">主题</a></li>
<li><a style="background:#a5903c;" target="_blank" href="http://kutoku.com">PNG</a></li>
</ul>
</li>
<li><a target="_blank" href="http://kutoku.com">Contact</a></li>
</ul>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
