新闻中心

二级下拉菜单效果js代码

发布时间:1283648660　点击量:

 
 <!--文章内容--> 
<!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>
<title>简洁实用的二级下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';}
#mainNavBar{width:100%;background:#999;padding:10px 0;}
#nav{width:760px;height:30px;margin:0 auto;}
#nav ul{padding:0;margin:0;}
#nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}
#nav ul li a{display:block;color:#fff;text-decoration:none;}
#nav ul li a:hover{font-weight:bold;background:#666;}
#subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;}
#subNav a{text-decoration:none;font-weight:normal;display:block;}
#subNav a:hover{color:#f00;background:#f00;}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="mainNavBar">
	<div id="nav">
		<ul>
			<li>
				<a href="#">Add</a>
				<div id="subNav">
					<a href="#">写日志</a>
					<a href="#">增加分类</a>
				</div>
			</li>
			<li>
				<a href="#">Edit</a>
				<div id="subNav">
					<a href="#">修改分类</a>
					<a href="#">文章编辑</a>
				</div>
			</li>
			<li>
				<a href="#">Admin</a>
				<div id="subNav">
					<a href="#">文章管理</a>
					<a href="#">评论管理</a>
					<a href="#">留言管理</a>
					<a href="#">退出</a>
				</div>
			</li>
		</ul>
	</div>
</div>
<script language="javascript">
var nav=document.getElementById("nav").getElementsByTagName("li");
for(i=0;i<nav.length;i++){
nav[i].onmouseover=function(){
	this.style.fontWeight="bold";
	this.style.overflow="visible";
	this.style.background="#666666";
	}
nav[i].onmouseout=function(){
	this.style.fontWeight="normal";
	this.style.background="#999999"
	this.style.overflow="hidden";
	}
}
</script>
</body>
</html> 
 <!--/文章内容-->

提示：您可以先修改部分代码再运行或者直接保存

上一篇：tab选项卡js效果代码

下一篇：没有了

行业资讯

网　　址:

www.chinaweb.com

客服热线:15801450084

公司地址：北京房山良乡苏园

友情链接:

中国网站之家 php网站建设,php家教,php培训 php讲师备案号:京ICP备09035308号-1

电话:13717978877 QQ:158069817 email:msh8888@163.com

中国站长之家

当前位置:企业首页 >> 新闻中心

二级下拉菜单效果js代码

发布时间:1283648660　点击量:

上一篇：tab选项卡js效果代码

下一篇：没有了

最新资讯

行业资讯

友情链接:

中国站长之家

当前位置:企业首页 >> 新闻中心

二级下拉菜单效果js代码

发布时间:1283648660 点击量:

上一篇：tab选项卡js效果代码

下一篇：没有了

最新资讯

行业资讯

友情链接:

发布时间:1283648660　点击量: