<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一个简单的CSS制作的网站横向导航菜单 knowsky.com</title>
<script>
window.onload=function(){
var li=document.getElementById("nav").getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onmouseout=function(){
this.style.backgroundColor="";
}
li[i].onmouseover=function(){
this.style.backgroundColor="green";
}
}
}
</script>
</head>
<body style="background-color: #5396a4; background-repeat:repeat-x" >
<style>
ul,li{ margin:0px; padding:0px;list-style-type: none;}
li{background-color:gray}
#nav{}
#nav li{ float:left; margin-left:10px; height:30px; padding-top:8px; width:80px; text-align:center; overflow:hidden;}
#nav li a { margin-top:5px;}
#nav span{display:none;}
#nav a{font-size:13px;font-weight: bold;color: #FFFFFF;text-decoration: none; display:block;}
#nav a:hover{ color:#7c7c7c;top:1px; left:1px; position:relative;}
#nav a:hover span{ display:block; top:-2px; left:-2px; position:absolute; color:#FFFFFF;cursor:pointer; font-weight:bolder}
</style>
<div onmouseout="" onmouseover="" id="nav">
<ul>
<li><a href="#" >网站首页<span>网站首页</span></a></li>
<li><a href="#">网站首页<span>网站首页</span></a></li>
<li><a href="#" >网站首页<span>网站首页</span></a></li>
<li><a href="#">网站首页<span>网站首页</span></a></li>
<li><a href="#">网站首页<span>网站首页</span></a></li>
</ul>
</div>
</body>
</html>