JavaScript下拉菜单
* {
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;
margin-left:1px;
width:120px;
}
栏目1
栏目1->菜单1
栏目1->菜单2
栏目1->菜单3
栏目1->菜单4
栏目2
栏目2->菜单1
栏目2->菜单2
栏目2->菜单3
栏目2->菜单4
栏目2->菜单5
栏目3
栏目3->菜单1
菜单1->子菜单1
菜单1->子菜单2
菜单1->子菜单3
菜单1->子菜单4
栏目3->菜单2
栏目3->菜单3
菜单3->子菜单1
菜单3->子菜单2
菜单3->子菜单3
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
推荐阅读
判断是否是IE6版本并给出提示升级浏览器
下面的效果,只能在IE6下才能看到效果。
判断IE版本并给出提示升级浏览器
#ie6-warning{
background:rgb(255,255,225) url("/upload/201006/20100628012515690.gif") no-repeat scroll 3px center;
pos>>>详细阅读
本文标题:JavaScript多级下拉菜单代码(简单实用)
地址:http://www.17bianji.com/kaifa2/JS/26134.html
1/2 1