CSS下拉菜单

来源：互联网发布：照片十字绣软件编辑：程序博客网时间：2024/06/05 16:01

<!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>
<title>CSS下拉菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
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=startList;
</script>
<style type="text/css">
body{
text-align: center;
font-size:12px;
}
#popimg{
WIDTH:770px;
margin:0 auto;
text-align:center;
}
#popimg2{
WIDTH:770px;
margin:0 auto;
text-align:center;
z-index:-1;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
position:relative;
float: left;
width: 110px;
}
li ul {
position:absolute;
display: none;
top: 20px;left:0;
}
li:hover ul, li.over ul {
display: block;
}
ul li a{
display:block;
font-size:12px;
border: 1px solid #ccc;
padding:3px;
margin-right:1px;
text-decoration: none;
color: #777;background:#eee;
}
ul li a:hover{
background-color:#f4f4f4;
}
#test{
clear:both;
background-color:#999999;
width:769px;
height:100px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="popimg">


<ul >
<li class="mainlevel" id="mainlevel_01">
<ul id="sub_01">
<li><a href="views/home/about.asp~class_id=9.html">鲜柠吸蓝红</a></li>
</ul>
</li>
<li class="mainlevel " id="mainlevel_02">
<ul id="sub_02">
<li><a href="views/home/store.asp.html">蜜瓜木瓜爽</a></li>
</ul>
</li>
<li class="mainlevel " id="mainlevel_03"><a href="views/home/nproduct.asp.html" class="product">4</a>
<ul id="sub_03">
<li><a href="views/home/product.asp~class_id=8.html">水果豆腐花</a></li>
</ul>
</li>
<li class="mainlevel " id="mainlevel_04"><a href="join.asp.html" class="join"></a>
<ul id="sub_04">
<li><a href="views/home/join.asp~class_id=15.html">鲜榨西瓜汁</a></li>
</ul>
</li>
<li class="mainlevel " id="mainlevel_05"><a href="news.asp.html" class="news"></a>
<ul id="sub_05">

<li><a href="views/home/news.asp~class_id=21.html">香芋布蕾</a></li>

</ul>
</li>
<li class="mainlevel " id="mainlevel_06" ><a href="school.asp.html" class="school"></a>
<ul id="sub_06">

<li><a href="views/home/school.asp~class_id=23.html">快来哟</a></li>

</ul>
</li>
<li class="mainlevel" id="mainlevel_07"><a href="contact.asp.html" class="contact"></a>
<ul id="sub_07">
<li><a href="views/home/contact.asp.html">联系我们</a></li>
<li><a href="views/home/message.asp.html">在线留言</a></li>
</ul>
</li>
</ul>

</div>

</body>
</html>