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
栏目2->菜单1
栏目1->菜单2
栏目1->菜单3
栏目1
栏目1->菜单1
栏目1->菜单2
栏目1
栏目1->菜单1
栏目1->菜单2
栏目1->菜单3
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
推荐阅读
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
一、申明函数的三种方法 (Declaring a Function) 方法一:function functionName([parameters]){functionBody}; Example D1 复制代码 代码如下: function add(a, b) { return a+b; } alert(add(1,2)); // produc>>>详细阅读
本文标题:JavaScript 双级下拉菜单实现代码
地址:http://www.17bianji.com/kaifa2/JS/27568.html
1/2 1