【demo】悬停出现的竖向导航

效果

代码

<ul class="v-nav">
    <li><img src="img/detail.png" width="50" height="50" />
    <ul class="list">
		<li ><a href="#content-1">|酒店|</a></li>
		<li ><a href="#content-2">|机票|</a></li>
		<li ><a href="#content-3">|跟团游|</a></li>
		<li ><a href="#content-4">|住宿|</a></li>
		<li ><a href="#content-5">|攻略|</a></li>
		<li ><a href="#content-6">|产品|</a></li>
	</ul> 
	</li>
</ul>

.v-nav{
 	position: fixed;
	left: 0;
	bottom: 20px;
	height: auto;
	width: 100px;
	z-index: 10;
}
.v-nav li{
    width: 100px;
    height: 50px;
    background-color: transparent;
    line-height: 50px;
    text-align: center;
}
.v-nav li a{
    display: block;
    width: 100%;
    height: 100%;
    color: #2d5186;
    font-size: 20px;
}
.v-nav li a:hover {
	background: #85ace0;
	color: #fff;
}
.v-nav > li{
    position: relative;
}
.v-nav .list{
    position: absolute;
    overflow: hidden;
    bottom: 50px;
    left: 0;
    height:0;
    transition: all 1s;
    -moz-transition: all 1s; /* Firefox 4 */
    -webkit-transition: all 1s; /* Safari 和 Chrome */
    -o-transition: all 1s; /* Opera */
}
.v-nav > li:hover .list{
    height: 300px;
}

标签：1s,color,demo,transition,height,竖向,nav,悬停,li
来源： https://blog.csdn.net/weixin_43606809/article/details/95795468