web简易效果集

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到触发元素时 在恢复设置好的高度
就可以很好的实现二级菜单过渡显示的效果拉。