標準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訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些