纯CSS样式二级菜单导航

纯CSS样式二级菜单导航,颜色样式大家自己更改，新起点就不在这里解释那么多了，代码如下：

HTML：

<div class="nav">
    <ul>
        <li class="mom"><a href="">网站首页</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="">联系我们</a></li>
    </ul>
</div>

CSS:

.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;
}