这样，我们整个下拉菜单就完成了，效果参下面图例，完整代码附到后面，实际应用中，对下拉样式再做美化即可。
<!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测试</title>
<style type="text/css">
<!–
body {
margin: 0px;
padding: 0px;
font-size:12px;
}
#nav {
background-color: #666;
border: thin solid #000;
height:100px;
border: 1px solid #666;
width:800px;
margin:0 auto;
}
#nav ul {
background-color: #900;
margin: 0px;
padding: 0px;
margin-right:16px;
margin-top:74px;
width:332px;
list-style-type: none;
float: right;
}
#nav ul li {
float: left;
}
#nav ul li a {
letter-spacing: 1px;
text-align: center;
display: block;
height: 22px;
width: 80px;
border-left: 1px solid #900;
color: #F96;
text-decoration: none;
padding-top: 4px;
background: url(/board.gif) no-repeat -12px -108px;
overflow: hidden;
margin-left: 2px;
}
#nav ul li a:hover {
color: #F60;
background: url(/board.gif) no-repeat -15px -118px;
padding-top: 6px;
overflow: hidden;
height: 20px;
width: 80px;
}
#nav ul li{position:relative;}
#nav ul li ul{display:none;margin:0;padding:0;position:absolute;left:3px;top:24px;background-color:#FC9;width:99px;border-bottom:1px solid #FC0;}
#nav ul li ul li{width:99px;float:none;border:0px 1px;}
#nav ul li ul li a,#nav ul li ul li a:hover{background:#3CF;width:98px;margin-left:0;text-align:left;border-top:1px solid #FC0;padding-left:5px;color:#000}
#nav ul li:hover ul, #nav li.over ul{display:block;}
.content{margin:0 auto;border:1px solid #33F;width:800px;}
.clear{font:0px/0px 宋体;clear:both;display:block}
–>
</style>
<script type="text/javascript">
var showNavList = function(){
if(document.all&&document.getElementById){
var navRoot = document.getElementById("nav_top");
for(i=0;i<navRoot.childNodes.length;i++){
var 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 = showNavList;
</script>
</head>
美女户外健身, 美翻
真人美女和动漫美女