运用display的block设置左拉导航栏,设置下拉导航栏。
1左拉导航栏
index.html
<div class="div1">
<ul>
<li class="dao li1">第一级d导航
<ul class="sub sub1">
<li class="main">heheh</li>
<li class="mian">heheh</li>
<li class="main">heheh</li>
</ul>
</li>
<li class="dao li2">第二级导航
<ul class="sub sub2">
<li class="main2">skdjfld</li>
<li class="main2">skdjfld</li>
<li class="main2">skdjfld</li>
</ul>
</li>
<li class="dao li3">第三季导航
<ul class="sub sub3">
<li class="main3">dfasdf</li>
<li class="main3">dfasdf</li>
<li class="main3">dfasdf</li>
</ul>
</li>
</ul>
</div>
index.css
*{
margin: 0;
padding:0;
}
li{
list-style: none;
}
.div1{
width: 100px;
height: 120px;
background: #aa1111;
margin: 100px;
border:1px solid #ccc;
border-bottom:none;
}
ul{
list-style: none;
margin: 0px;
padding: 0px;
/*text-align: center;*/
}
.dao{
width:100%;
height:40px ;
line-height: 40px;
position: relative;
/*padding:0px;*/
border-bottom: 1px solid #ccc;
}
.sub{
position: absolute;
left: 100px;
background: #494A5F;
top:0;
display: none;
}
.li1:hover .sub1{
display: block;
}
.li2:hover .sub2{
display: block;
}
.li3:hover .sub3{
display: block;
}
主要构思是:将<li>中的<ul>部分用display:none隐藏。当:hover时应display:block来出现左导航。
下拉导航:
index.html
<ul class="ul1">
<li class="li1">hah
<ul class="second">
<li>doudou</li>
<li>doudou</li>
</ul>
</li>
<li class="li2">haerh</li>
<li class="li3">haaah</li>
</ul>
css
*{
margin:0;
padding: 0;
}
.ul1{
display: inline-block;
/*text-decoration: none;*/
width: 300px;
height: 40px;
margin: 150px;
float: left;
position: relative;
}
li{
text-align: center;
line-height: 40px;
list-style: none;
display: block;
background: #2fa0ec;
border:1px solid;
width: 100px;
height:40px ;
}
.li1{
width: 100px;
height: 40px;
position: absolute;
float: left;
}
.li2{
width: 100px;
height: 40px;
display: block;
position: absolute;
float: left;
left: 100px;
}
.li3{
width: 100px;
height: 40px;
display: block;
position: absolute;
float: right;
left: 200px;
top:0;
}
.second{
top:40px;
left: -2px;
border: 1px solid #ccc;
display: none;
position: absolute;
margin: 0;
}
li:hover{
background: #AA66EE;
}
.li1:hover .second{
/*display: inline-block;*/
display: block;
}
通过设置第一级导航的left值那么就依次float在左边。