javascript + css 下拉菜单 2.0版

时间：2014-09-21 19:27:11 阅读：212 评论：0 收藏：0 [点我收藏+]

标签：style http color io os java ar for sp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
font-size:small;
}
#navigation {
margin:20px;
}
#navigation, #navigation li ul {
list-style-type:none;
}
#navigation li {
float:left;
text-align: center;
position:relative;
}
#navigation li a:link, #navigation li a:visited {
display:block;
width:120px;
height:40px;
border:1px solid #FFF;
border-width:1px 1px 0 0;
background-color:#6699ff;
color:#000;
text-decoration:none;
text-align:center;
line-height:40px;
}
#navigation li a:hover {
color:#000;
background:#3399ff;
}
#navigation li ul li a:hover {
color:#000;
background:#3366ff;
}
#navigation li ul {
display: none;
top: 40px;
left: 0;
margin-top: 1px;
width: 120px;
}
#navigation li ul li ul {
display: none;
position: absolute;
top: 0px;
left: 120px;
margin-top: 0;
margin-left: 1px;
width: 120px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var nav = document.getElementById("navigation");
registerEvent(nav);
}
function registerEvent(obj) {
var oLiList = obj.getElementsByTagName("li");
for (var i = 0; i < oLiList.length; ++i) {
var oUlList = oLiList[i].getElementsByTagName("ul");
if (oUlList.length > 0) {
oLiList[i].onmouseover = function() {
var oUl = this.getElementsByTagName("ul").item(0);
oUl.style.display = "block";
}
oLiList[i].onmouseout = function() {
var oUl = this.getElementsByTagName("ul").item(0);
oUl.style.display = "none";
}
}
}
}
</script>
</head>
<body>
<ul id="navigation">
<li>
<a href="#">菜单一</a>
<ul>
<li><a href="#">菜单项11</a></li>
<li><a href="#">菜单项12</a></li>
<li><a href="#">菜单项13</a></li>
</ul>
</li>
<li>
<a href="#">菜单二</a>
<ul>
<li><a href="#">菜单项21</a></li>
<li><a href="#">菜单项22</a></li>
<li><a href="#">菜单项23</a></li>
</ul>
</li>
<li>
<a href="#">菜单三</a>
<ul>
<li><a href="#">菜单项31</a></li>
<li><a href="#">菜单项32</a></li>
<li><a href="#">菜单项33</a>
<ul>
<li>
<a href="#">菜单项311</a>
</li>
<li><a href="#">菜单项312</a></li>
<li><a href="#">菜单项313</a>
<ul>
<li><a href="#">菜单项3131</a></li>
<li><a href="#">菜单项3132</a></li>
<li><a href="#">菜单项3133</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

标签：style http color io os java ar for sp

原文地址：http://www.cnblogs.com/zhujiasheng/p/3984724.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行