|
看看代码就知道了，很方便！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>
<style type="text/css">
<!--
body { background:#ddd;font-family: arial, 宋体, serif;font-size:12px; text-align:center;}
#top{width:760px;background: url(nav1.gif) #ddd; margin:0 auto; margin-top:5px;border:1px solid #ccc; text-align:left;}
#flash,#top,#menu li ul,#main{filter:progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=#333333 , direction=135 , strength=3);}
#top h2{margin:0; height:24px; line-height:24px; text-indent:10px; color:#009; font-size:13px;}
#menu { height:24px;line-height:26px;list-style-type:none; margin:0;background:#666; float:right}
#menu a {display:block; width:80px; text-align:center;text-decoration:none;}
#menu li {float:left;width:80px;}
#menu li a{background: url(nav1.gif) #ddd;color:#c00; border-left:1px solid #ccc}
#menu li a:hover{background:#eee; color:#f00}
#menu li ul {line-height:27px;list-style-type:none;text-align:left;left:-999em; width:161px; position:absolute; border:1px solid #ccc;}
#menu li ul li{float:left;}
#menu li ul a{display:block; width:161px;text-align:left; text-indent:1em; border:0}
#menu li ul a:link {background:#eee;color:#666;}
#menu li ul a:visited {background:#eee;color:#666;}
#menu li ul a:hover {color:#F00;font-weight:normal;background:#fff;}
#menu li:hover ul {left:auto; margin-left:0px}
#menu li.sfhover ul {left:auto;margin-left:0px}
#flash{ width:762px; height:100px; margin-top:5px; background:#c00; border:0px solid #ccc}
#main{ width:760px;margin-top:5px; background: #eee; border:1px solid #ccc}
.side{width:274px; margin:0; border-right:1px solid #ccc; float:left; text-align:left; height:300px}
.cont{float:right; width:485px;}
.bott{clear:both; height:10px; background:#ddd}
#bottom{width:760px;font-size:10px;color:#999}
#bottom h5{ float:left}
#bottom h6{ float:right}
#bottom h5,#bottom h6{font-size:10px; margin:0; padding:5px 0; font-weight:normal}
-->
</style>
<script type="text/javascript">
function menuFix() {
var sfEls = document.getElementById("menu").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>
</head>
<body>
<div id="flash"></div>
<div id="top">
<ul id="menu">
<li><a href="#">站点首页</a></li>
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
<h2>pixy.cn</h2>
</div>
<div id="main">
<div class="side">
</div>
<div class="cont"></div>
</div>
<div id="bottom">
<h5>Copyright 2006 Pixy.cn All Right Reserved | ICP:05001355 | Visitor:44834</h5>
<h6>Design By Pixy 20060708</h6>
</div>
</body>
</html>
|
一套CSS菜单，感觉很适合写动态菜单！
一共有 1 条评论