横向二级下拉菜单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>横向二级下拉菜单</title>
<style>
*{
margin:0;
padding:0;
}
body {
font-size:15px;
}
a {
display: block;
color:#666;
width: 80px;
text-align:center;
text-decoration:none;
}
a:hover {
color:#FFF;
background:#C00;
}
/*主菜单列表样式*/
#nav{
line-height: 24px;/*文字的行高*/
list-style: none;/*隐藏默认的列表符号*/
background: #666;
margin-left: 100px;
}
/*一级菜单列表样式*/
#nav li{
float: left;/*列表项向左浮动*/
width: 80px;
background: #ccc;
}
/*二级菜单列表样式*/
#nav li ul{
line-height: 24px;
position: absolute;
left: -1000px;/*将left坐标设置为负值,起到隐藏二级菜单项的作用*/
list-style: none;
text-align:left;
width: 180px;
}
/*二级菜单项样式*/
#nav li ul li{
background: #F6F6F6;
}
/*二级菜单项中的超链接*/
#nav li ul a{
width: 180px;
text-align: left;
padding-left: 20px;
}
/*鼠标移动到一级菜单后应用的样式*/
#nav li.mouseover ul {
left: auto;/*取消left属性默认的-1000px的设置,显示二级菜单项*/
}
h1{
margin-left: 200px;
}
ol{
clear:both; /*取消浮动*/
margin-left: 115px;
margin-top:150px;
}
</style>
<script type="text/javascript" language="JavaScript">
function makeMenu(){
var items=document.getElementById("nav").getElementsByTagName("li");
for(var i=0;i<items.length;i++){
items[i].οnmοuseοver=function(){
this.className="mouseover";
}
items[i].οnmοuseοut=function(){
this.className="";
}
}
}
</script>
</head>
<body οnlοad="makeMenu()">
<h1>横向二级下拉菜单</h1>
<ul id="nav">
<li><a href="菜单页面地址" >菜单项A</a>
<ul>
<li><a href="菜单页面地址">菜单项A1 </a></li>
<li><a href="菜单页面地址">菜单项A2 </a></li>
<li><a href="菜单页面地址">菜单项A3 </a></li>
<li><a href="菜单页面地址">菜单项A4 </a></li>
</ul>
</li>
<li><a href="菜单页面地址" >菜单项B</a>
<ul>
<li><a href="菜单页面地址">菜单项B1 </a></li>
<li><a href="菜单页面地址">菜单项B2 </a></li>
<li><a href="菜单页面地址">菜单项B3 </a></li>
<li><a href="菜单页面地址">菜单项B4 </a></li>
</ul>
</li>
<li><a href="菜单页面地址" >菜单项C</a>
<ul>
<li><a href="菜单页面地址">菜单项C1 </a></li>
<li><a href="菜单页面地址">菜单项C2 </a></li>
<li><a href="菜单页面地址">菜单项C3 </a></li>
<li><a href="菜单页面地址">菜单项C4 </a></li>
</ul>
</li>
<li><a href="菜单页面地址" >菜单项A</a>
<ul>
<li><a href="菜单页面地址">菜单项A1 </a></li>
<li><a href="菜单页面地址">菜单项A2 </a></li>
</ul>
</li>
</ul>
<ol>
<li>本菜单采用无序列表设计,可以支持二级横向下拉菜单。</li>
<li>初始状态下,二级菜单通过将水平坐标设置为负值,进行隐藏</li>
<li>当鼠标移动到对应的一级菜单上后,恢复二级菜单的水平坐标,显示菜单项。</li>
</ol>
</body>
</html>
Being away from home, we have nothing but a desire to make a figure