CSS+DIV下拉菜单（第3页）-远方教程

　　这样，我们整个下拉菜单就完成了，效果参下面图例，完整代码附到后面，实际应用中，对下拉样式再做美化即可。
<!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>

}
#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>

window.onload = showNavList;
</script>
</head>

第1页第2页 第3页 第4页