JavaScript 下拉菜单实现代码下拉菜单实现代码
利用css+js实现的下拉菜单。通过getElementsByTagName获取ul,隐藏显示。
<title>JavaScript下拉菜
单</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
font-family:verdana,
sans-serif;
font-size:small;
}
#navigation, #navigation
li ul {
list-style-type:none;
}
#navigation {
margin:20px;
}
#navigation li {
float:left;
text-align:center;
position:relative;
}
#navigation li a:link,
#navigation li a:visited {
display:block;
text-decoration:none;
color:#000;
width:120px;
height:40px;
line-height:40px;
border:1px solid #fff;
border-width:1px 1px 0
0;
background:#c5dbf2;
padding-left:10px;
}
#navigation li a:hover {
color:#fff;
background:#2687eb;
}
#navigation li ul li
a:hover {
color:#fff;
background:#6b839c;
}
#navigation li ul {
display:none;
position:absolute;
top:40px;
left:0;
margin-top:1px;
width:120px;
}
#navigation li ul li ul {
display:none;
position:absolute;
top:0px;
left:130px;
margin-top:0;
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]