标准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 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 id="popimg2">  <div id="test"></div></div></body></html>

上一篇：带阴影绿色的CSS网站导航条

下一篇：CSS tab 选项卡(兼容好)

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注