<!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS下拉菜单演示</title> <style type="text/css"> <!-- *{margin:0;padding:0;border:0;} #div_center { width:790px; height:23px; background:#003399; margin-left: auto;margin-right:auto;} /*定义总体宽度、高度；background:003399; 控制背景颜色,居中对齐*/ #nav { line-height: 20px; list-style-type: none; margin-top:5px;} /*控制一级菜单行高；上边距5px；*/ #nav a { display: block; width: 77px; text-align:center; font-size:12px;} /*一级菜单链接总体样式：每个菜单的宽，居中对齐，文字大小*/ #nav a:link { color:#FFF; text-decoration:none;margin:0;} /* 未访问的链接 */ #nav a:visited {color:#FFF;text-decoration:none;margin:0;} /* 已访问的颜色 */ #nav a:hover {color:#C00;text-decoration:none;} /* 鼠标在链接上 */ #nav li {float: left;} /* 一级菜左对齐 */ #nav li a:hover{background:#FFFFFF;} /* 鼠标在一级菜单上改变其背景色 */ #nav li ul {line-height: 24px; background:#FFF; list-style-type: none;text-align:left;left: -999em; width:132px; position: absolute;border-width: 1px;border-top-style: none;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-color: #003399; padding:1px;} /*二级菜单总体样式：行高24px；背景颜色；外框宽度；相对位置；边框一个象素，上边没样式，左右下边实线，边框颜色#003399；内边距1个象素*/ #nav li ul a{display:block; width: 130px;text-align:left;padding-left:2px;} /* 二级菜单链接样式；背景宽度、左对齐，左缩进2 */ #nav li ul a:link {color:#0d5097; text-decoration:none;} /* 未访问的链接 */ #nav li ul a:visited {color:#0d5097;text-decoration:none;} /* 已访问的链接 */ #nav li ul a:hover {color:#FFF;text-decoration:none;font-weight:normal;background:#003399;}/* 鼠标在链接上 */ /*#nav li:hover ul {left: auto;}*/ #nav li.sfhover ul {left: auto;} #content {clear: left;} --> </style> <script type=text/javascript> <!-- function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),""); } } } window.onload=menuFix; //--> </script> <div id=div_center> <ul id=nav> <li style="margin-left: 10px"><a href="index.asp">网站首页</a></li> <li><a href="Index.asp">新闻中心</a> <ul> <li><a href="ShowClass.asp?ClassID=1">·新闻中心</a></li> <li><a href="ShowClass.asp?ClassID=2">·新闻中心</a></li> <li><a href="ShowClass.asp?ClassID=3">·新闻中心</a></li> </ul> </li> <li><a href="#">企业简介</a> <ul> <li><a href="ShowArticle.asp?ArticleID=4">·企业简介</a></li> <li><a href="ShowArticle.asp?ArticleID=5">·企业简介</a></li> <li><a href="ShowArticle.asp?ArticleID=6">·企业简介</a></li> <li><a href="ShowArticle.asp?ArticleID=7">·企业风采</a></li> <li><a href="ShowArticle.asp?ArticleID=8">·企业简介</a></li> <li><a href="ShowArticle.asp?ArticleID=6">·企业简介</a></li> </ul> </li> <li><a href="Article/">文章中心</a> </li> </ul> </div> </body> </html>
提示：你可以先修改部分代码再运行。
