类似透明的红色网站下拉菜单代码
代码简介：
同样是一款下拉菜单，但效果却不一样，为什么看上去会很漂亮，这需要有一定的美感，这就是美工应该具备的基本素质，我们应该努力学习网页本色，配色也是导航条外观美丽的重要指标哦。
代码内容：
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>类似透明的红色网站下拉菜单代码_网页代码站(www.webdm.cn)</title>
<style type="text/css">
<!--
body {
font:normal 400 12px/200% "宋体",Arial, Helvetica, sans-serif;
}
* {
border:0;
margin:0;
padding:0;
}
a {
text-decoration:none;
}
ul {
list-style-type:none;
}
li {
float:left;
}
table {
margin: 0 auto;
}
#nav {
line-height:30px;
background:#CC2A33;
width:760px;
padding:0 30px;
}
#nav a {
display:block;
width:100px;
text-align:center;
}
#nav a:hover {
color:#FFF;
font-weight:700;
}
#nav li a:hover {
background-color:#999;
}
#nav li ul {
text-align:left;
left:-999em;
position:absolute;
width:100px;
}
#nav li ul li {
background:#F6F6F6;
}
#nav li ul a {
display:block;
text-align:left;
padding-left:24px;
}
#nav li ul a:hover {
color:#FFF;
font-weight:400;
background:#CC2A33;
}
#nav a:link,#nav a:visited {
color:#FFF;
}
#nav li ul a:link,#nav li ul a:visited {
color:#666;
}
#nav li:hover ul,#nav li.sfhover ul {
left:auto;
}
-->
</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>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://www.webdm.cn">网页代码站</a></li>
<li><a href="/">代码下载</a>
<ul>
<li><a href="/">最新更新</a></li>
<li><a href="/other/top100.shtml">下载排行</a></li>
</ul>
</li>
<li><a href="/">网页特效</a>
<ul>
<li><a href="/">菜单导航</a></li>
<li><a href="/">层和布局</a></li>
</ul>
</li>
<li><a href="/">ASP源码</a>
<ul>
<li><a href="http://www.webdm.cn">论坛社区</a></li>
<li><a href="/">AJAX相关</a></li>
<li><a href="/">新闻文章</a></li>
</ul>
</li>
<li><a href="/">脚本资源</a>
<ul>
<li><a href="/">AJAX</a></li>
<li><a href="/">JQUERY</a></li>
</ul>
</li>
<li><a href="/">网站留言</a></li>
<li><a href="http://www.webdm.cn">联系我们</a></li>
</ul>
</div>
</body>
</html>
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
代码来自：http://www.webdm.cn/webcode/cf87e2c2-0bb0-4c50-bba6-1b0ae713ff30.html
