<!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=utf-8" />
<title>无标题文档</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color:#FFF;
}
#page{
margin:0 auto;
width:960px;
height:600px;
background-color: #E6E6E6;
}
#header{
height:50px;
}
#main{
height:550px;
background-color:#C2C2C2;
}
#ful li{
float:left;
padding:0 10px;
height:50px;
list-style-type:none;
position:relative;
}
#ful li ul{
position:absolute;
left:0;
top:50px;
background-color:#FFBFFF;
}
#ful li ul li{
padding:0;
margin:0;
display:block;
height:20px;
float:none;
}
</style>
<script type="text/javascript">
function showUL(vid){
document.getElementById(vid).style.display='block';
}
function hideUL(vid){
document.getElementById(vid).style.display='none';
}
</script>
</head>
<body>
<div id="page">
<div id="header">
<ul id='ful'>
<li οnmοuseοver="showUL('userli');" οnmοuseοut="hideUL('userli');"><a href="#">Users</a>
<ul id="userli" style="display:none">
<li style="width:30px;" οnmοuseοver="showUL('floor1');" οnmοuseοut="hideUL('floor1');">aaa
<ul id="floor1" style="position:absolute;left:30px;top:0px;display:noen;">
<li>++++++</li>
<li>-------</li>
</ul>
</li>
<li>bbb</li>
</ul>
</li>
<li οnmοuseοver="showUL('menuli');" οnmοuseοut="hideUL('menuli');">Menus
<ul id="menuli" style="display:none">
<li>123456</li>
<li>456789123123123123</li>
</ul>
</li>
</ul>
</div>
<div id="main"></div>
</div>
</body>
</html>
ul,li实现顶级栏目
最新推荐文章于 2021-04-09 11:07:44 发布