標準CSS+Js下拉菜單

2024-09-05 12:19:43

字體：大中小

來源：轉載

供稿：網友

標準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下拉菜單</title><meta http-equiv="Content-Type" content="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   class="brhnp5h"   id="popimg"><ul id="nav">  <li>圖形圖像    <ul>       <li>Ajax/JavaScript</li><li>ExtJS</li><li>jQuery</li>	</ul>  </li>  <li>參考    <ul>      <li>多媒體技術</li><li>控件相關</li><li>圖形處理</li>    </ul>  </li>  <li>Ajax    <ul>      <li>CSS特效</li><li>HTML</li><li>在線編輯器</li>    </ul>  </li>    <li>教程類    <ul>      <li>多媒體技術</li><li>控件相關</li><li>圖形處理</li></ul>  </li>  <li>參考    <ul>      <li>Ajax/JavaScript</li><li>ExtJS</li><li>jQuery</li>    </ul>  </li>  <li>VB源代碼    <ul><li>多媒體技術</li><li>控件相關</li><li>圖形處理</li>    </ul>  </li>  <li>VC++    <ul><li>界面編程</li><li>數據庫應用</li><li>報表打印</li>    </ul>  </li></ul></div><div   class="jb79fxf"   id="popimg2">  <div   class="zpdlp1b"   id="test"></div></div></body></html>

上一篇：帶陰影綠色的CSS網站導航條

下一篇：CSS tab 選項卡(兼容好)

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注