css实现二级导航菜单
html:
``html
<ul class="uls">
<!-- one hover普通显示二级菜单 -->
<li class="one">浙江省
<ul>
<li>杭州市</li>
<li>金华市</li>
<li>温州市</li>
<li>宁波市</li>
<li>绍兴市</li>
</ul>
</li>
<li></li>
<li class="one">湖北省
<ul>
<li>武汉市</li>
<li>荆州市</li>
<li>黄冈市</li>
<li>孝感市</li>
<li>仙桃市</li>
</ul></li>
<li></li>
<!-- two hover动画过渡显示二级菜单 -->
<li class="two">湖南省
<ul>
<li>长沙市</li>
<li>常德市</li>
<li>岳阳市</li>
<li>永州市</li>
<li>湘潭市</li>
</ul>
</li>
<li></li>
<li class="two">江西省
<ul>
<li>南昌市</li>
<li>九江市</li>
<li>上饶市</li>
<li>抚州市</li>
<li>赣州市</li>
</ul>
</li>
<li></li>
<!-- three hover过渡横向显示二级菜单 -->
<li class="three">湖南省
<ul>
<li>长沙市</li>
<li>常德市</li>
<li>岳阳市</li>
<li>永州市</li>
<li>湘潭市</li>
</ul>
</li>
<li></li>
<li class="three">江西省
<ul>
<li>南昌市</li>
<li>九江市</li>
<li>上饶市</li>
<li>抚州市</li>
<li>赣州市</li>
</ul>
</li>
<li></li>
</ul>
css:
<style>
ul{
list-style: none;
margin: 0;padding: 0;
}
.uls{
width:1180px;
margin:50px auto;
/* overflow: hidden; */
}
.uls::after{
display: block;
content: '';
clear: both;
}
.uls>li{
box-sizing: border-box;
width:100px;
height:30px;
line-height: 30px;
text-align: center;
}
.uls>li{
float: left;
cursor: pointer;
}
.uls>li:nth-child(2n){
width:1px;
height:20px;
background-color: #ccc;
margin:5px 10px;
}
.one,.two,.three{
position: relative;
}
.one>ul{
position:absolute;
cursor: pointer;
display: none;
top: 30px;
width: 100px;
height: 30px;
text-align: center;
}
.one:hover>ul{
display: block;
}
.one>ul>li:hover{
color: lightgreen;
}
/*two hover动画过度显示二级菜单 */
.two>ul{
position:absolute;
cursor: pointer;
text-align: center;
overflow: hidden;
height:0px;
opacity:0;
top:60px;
transition:top .5s,opacity .5s;
}
.two:hover>ul{
/* display:block; */
opacity:1;
top:30px;
height:150px;
width: 100px;
}
.two>ul>li:hover{
color:blue;
}
/* three hover过渡横向显示二级菜单 */
.three>ul>li{
width: 100px;height: 30px;
float: left;
}
.three>ul::after{
display: block;
content: '';
clear: both;
}
.three>ul{
position:absolute;
cursor: pointer;
text-align: center;
overflow:hidden;
top:30px;
height:0px;
opacity:0;
transition: opacity .3s,height .5s;
}
.three:hover>ul{
opacity:1;
height:60px;
width:300px;
}
.three>ul>li:hover{
color:forestgreen;
}
</style>
注意:在实现二级菜单显示/隐藏时 使用的opacity属性 然而opacity属性虽然能够隐藏元素 但是也占据文档位置 这时会引发一个新的问题?在hover隐藏元素上方时 也会出现过渡效果。
所以给隐藏的元素(二级菜单)的height 设置为0 当hover到触发元素时 在恢复设置好的高度
就可以很好的实现二级菜单过渡显示的效果拉。