DIV+CSS 级联下拉菜单多级下拉菜单

最新推荐文章于 2024-06-13 09:00:00 发布

iteye_17172

最新推荐文章于 2024-06-13 09:00:00 发布

阅读量671

点赞数

分类专栏： web前端文章标签： CSS JavaScript IE Firefox 浏览器 ViewUI

本文链接：https://blog.csdn.net/iteye_17172/article/details/81892241

版权

web前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

很多人在做web的级联下拉菜单时，常常利用Javascript来写，这里强烈不推荐使用这种方法，原因有两个：
[b]1.必须利用onmouseover和onmouseout函数，效率先不说，非常复杂。[/b]尤其是设置到多级菜单的时候，需要利用递归，难度很大。
[b]2.兼容性太差。[/b]写完的级联菜单在ie下正常，在Firefox就跑样了，同样在Firefox正常，在ie下就走样了，最后需要根据浏览器写两份Javascript，苦啊~~~。

这里推荐利用css生成下来菜单。方法直接，兼容性好，需要写Javascript代码。生成后的效果图如下图：
[img]http://www.kutoku.info/images/java/100713/demo.png[/img]

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>

iteye_17172

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV+CSS 级联下拉菜单多级下拉菜单

很多人在做web的级联下拉菜单时，常常利用Javascript来写，这里强烈不推荐使用这种方法，原因有两个：[b]1.必须利用onmouseover和onmouseout函数，效率先不说，非常复杂。[/b]尤其是设置到多级菜单的时候，需要利用递归，难度很大。[b]2.兼容性太差。[/b]写完的级联菜单在ie下正常，在Firefox就跑样了，同样在Firefox正常，在ie下就走样了，最后需...
复制链接

扫一扫