純CSS樣式二級菜單導航

純CSS樣式二級菜單導航；

HTML：

<div class="nav">
    <ul>
        <li class="mom"><a href="http://www.henenseo.com">網站首頁</a></li>
        <li><a href="">關於我們</a></li>
        <li class="show_nav"><a href="">案例中心</a>
            <ul class="hide_nav">在這裏插入代碼片
                <li><a href="">網頁設計</a></li>
                <li><a href="">App開發</a></li>
                <li><a href="">網站建設</a></li>
                <li><a href="">微信小程序</a></li>
            </ul>
        </li>
        <li><a href="">新聞中心</a></li>
        <li><a href="http://www.henenseo.com">新起點博客</a></li>
    </ul>
</div>

			.nav{
				width:100%;
				height: 50px;
				text-align: center;
				background:orange;
			}
			.nav ul{
				margin: 0px auto;
			}
			.nav ul li{
				width:100px;
				line-height: 50px;
				float: left;
			}
			.nav ul li a{
				width: 100px;
				color:#fff;
				display: block;
			}
			.nav ul li a:hover{
				background: #ffb908;
			}
			.mom a:nth-child(1){
				background: #FFFFFF;
				color: orange;
			}
			
			.show_nav:hover .hide_nav{
				display: block;
			}
			.nav .hide_nav {
				display: none;
				transition:all 0.5s;
				position: relative;
			}
			.nav .hide_nav a{
				width:100px;
				height: 50px;
				background: #000;
			}
			.nav .show_nav .hide_nav .three_nav{
				width: 100px;
				height: 50px;
				line-height: 50px;
				position: absolute;
				left: 100px;
				top:0;
				background-color: #FFB908;
				display: none;
			}
			
			.nav .hide_nav:hover .three_nav{
				display: block;
			}