您的位置：首页 > Web前端 > JavaScript

JavaScript 双级下拉菜单实现代码

2018-10-12 14:11 766 查看

JavaScript下拉菜单

* {
padding:0;
margin:0;
}
body {
font-family:verdana, sans-serif;
font-size:small;
}
#navigation, #navigation li ul {
list-style-type:none;
}
#navigation {
margin:40px;
}/*可有可无属性，是内容与边的距离*/
#navigation li {
float:left;
text-align:center;
position:relative;/*position:relative一定要写，是下面的链接相对它绝对定位*/
}
#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none;
color:#000;
width:120px;/*改变所有的导航栏的长度*/
height:30px;/*改变所有导航栏的高度*/
line-height:30px;
border:1px solid red;/*没有这个属性的所有的导航栏的颜色就连在一起了*/
background:#c5dbf2;
padding-left:10px;
}
#navigation li ul {
display:none;
position:absolut;
top:40px;
left:0;
margin-top:1px;/*可有可无，无的话主菜单和二级菜单就会没有空隙*/
width:120px;
}
#h{
position:absolute;
top:74px;
left: 40px;
}


栏目1
[ul]
[li]栏目2->菜单1
栏目1->菜单2
栏目1->菜单3

[/li]
栏目1

[li]栏目1->菜单1
栏目1->菜单2

[/li]
栏目1

[li]栏目1->菜单1
栏目1->菜单2
栏目1->菜单3

[/li]
[/ul]

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航