标准CSS+Js下拉菜单_菜单导航特效

标准CSS+JavaScript下拉菜单，鼠标放到菜单项显示出二级菜单，灰色，假如对颜色不满足，请自己改动一下。

<!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>CSS下拉菜单-codeFans.net</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<script type="text/javascript">
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;
</script>
<style type="text/css">
body{
text-align: center;
font-size:12px;
}
#popimg{
WIDTH:770px;
margin:0 auto;
text-align:center;
}
#popimg2{
WIDTH:770px;
margin:0 auto;
text-align:center;
z-index:-1;
}
ul { 
	padding: 0;
	margin: 0;
	list-style: none;
}
li {
	position:relative;
	float: left;	
	width: 110px;	
}
li ul { 
	position:absolute;
	display: none;
	top: 20px;left:0;
}
li:hover ul, li.over ul {
	display: block;
}
ul li a{
	display:block;
	font-size:12px;
	border: 1px solid #ccc;
	padding:3px;
	margin-right:1px;
	text-decoration: none;
	color: #777;background:#eee;
}
ul li a:hover{
	background-color:#f4f4f4;
}
#test{
	clear:both;
	background-color:#999999;
	width:769px;
	height:100px;
	margin:0 auto;
}
</style>
</head>
<body>
<div id="popimg">
<ul id="nav">
  <li><a href="">图形图像</a>
    <ul>
       <li><a href="/sort/list_11_203_1.shtml">Ajax/JavaScript</a></li><li><a href="/sort/list_11_83_1.shtml">ExtJS</a></li><li><a href="/sort/list_11_112_1.shtml">jQuery</a></li>
	</ul>
  </li>
  <li><a href="">参考</a>
    <ul>
      <li><a href="/sort/list_8_165_1.shtml">多媒体技术</a></li><li><a href="/sort/list_8_162_1.shtml">控件相关</a></li><li><a href="/sort/list_8_160_1.shtml">图形处理</a></li>
    </ul>
  </li>
  <li><a href="">Ajax</a>
    <ul>
      <li><a href="/sort/list_11_168_1.shtml">CSS殊效</a></li><li><a href="/sort/list_11_96_1.shtml">HTML</a></li><li><a href="/sort/list_11_202_1.shtml">在线编辑器</a></li>
    </ul>
  </li>
    <li><a href="">教程类</a>
    <ul>
      <li><a href="/sort/list_8_165_1.shtml">多媒体技术</a></li><li><a href="/sort/list_8_162_1.shtml">控件相关</a></li><li><a href="/sort/list_8_160_1.shtml">图形处理</a></li>
</ul>
  </li>
  <li><a href="">参考</a>
    <ul>
      <li><a href="/sort/list_11_203_1.shtml">Ajax/JavaScript</a></li><li><a href="/sort/list_11_83_1.shtml">ExtJS</a></li><li><a href="/sort/list_11_112_1.shtml">jQuery</a></li>
    </ul>
  </li>
  <li><a href="">VB源代码</a>
    <ul>
<li><a href="/sort/list_8_165_1.shtml">多媒体技术</a></li><li><a href="/sort/list_8_162_1.shtml">控件相关</a></li><li><a href="/sort/list_8_160_1.shtml">图形处理</a></li>
    </ul>
  </li>
  <li><a href="">VC++</a>
    <ul><li><a href="/sort/list_8_163_1.shtml">界面编程</a></li><li><a href="/sort/list_8_161_1.shtml">数据库应用</a></li><li><a href="/sort/list_8_166_1.shtml">报表打印</a></li>
    </ul>
  </li>
</ul>
</div>
<div id="popimg2">
  <div id="test"></div>
</div>
</body>
</html>

所属频道：菜单导航特效/更新时间：2010-05-22

[收藏][报错][返回列表]

标准CSS+Js下拉菜单_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些