**
方法一：纯css实现下拉菜单
**
Document*{
margin: 0;
padding:0;
}
#nav{/*置父容器高度，宽度，背景颜色，容器水平居中*/
background: #eee;
width: 600px;
height: 40px;
margin: 0 auto;
}
#nav ul{/*去掉点点*/
list-style: none;
}
#nav ul li{/*每一个li左浮动形成横排，高度占满父容器形成文字垂直居中，文字水平居中*/
float: left;
line-height: 40px;
text-align: center;
position: relative;/*给子ul定位用的*/
}
#nav ul li a{/*去下下划线,变成块状继承父容器高度，左右撑开*/
text-decoration: none;
color:#000;
padding:0 10px;
display: block;
}
#nav ul li a:hover{
color: #fff;
background-color: #666;
}
#nav ul li ul {
position: absolute;/*相对于父li的位置进行定位*/
left: 0;
top:40px;
display: none;/*隐藏下拉菜单*/
}
#nav ul li ul li{
float: none;
background-color:red;
}
#nav ul li:hover ul{
display: block;
}
**
方法二：js实现下拉菜单
**
Document*{
margin: 0;
padding:0;
}
#nav{/*置父容器高度，宽度，背景颜色，容器水平居中*/
background: #eee;
width: 600px;
height: 40px;
margin: 0 auto;
}
#nav ul{/*去掉点点*/
list-style: none;
}
#nav ul li{/*每一个li左浮动形成横排，高度占满父容器形成文字垂直居中，文字水平居中*/
float: left;
line-height: 40px;
text-align: center;
position: relative;/*给子ul定位用的*/
}
#nav ul li a{/*去下下划线,变成块状继承父容器高度，左右撑开*/
text-decoration: none;
color:#000;
padding:0 10px;
display: block;
}
#nav ul li a:hover{
color: #fff;
background-color: #666;
}
#nav ul li ul {
position: absolute;/*相对于父li的位置进行定位*/
left: 0;
top:40px;
display: none;
}
#nav ul li ul li{
float: none;
background-color:#eee;
}
function show(li){
var sub=li.getElementsByTagName("ul")[0];
sub.style.display="block";
}
function hide(li){
var sub=li.getElementsByTagName("ul")[0];
sub.style.display="none";
}
扫一扫
5249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
