html+css nav 导航

记录一下，以后直接用~~~

效果图：

 

html部分：

<ul class="nav-list">
                <li class="nav-item active"><a href="#" class="link"><span>网站首页</span></a></li>
                <li class="nav-item"><a href="#" class="link"><span>专业服务</span></a></li>
                <li class="nav-item"><a href="#" class="link"><span>产品中心</span></a>
                <ul class="nav-two">
                        <li class="nav-two-item"><a href="#" class="link">供应链物流</a>
                            <ul class="nav-three">
                                <li class="nav-three-item"><a href="#" class="link">第三层</a></li>
                                <li class="nav-three-item"><a href="#" class="link">第三层</a></li>
                                <li class="nav-three-item"><a href="#" class="link">第三层</a></li>
                                <li class="nav-three-item"><a href="#" class="link">第三层</a></li>
                                <li class="nav-three-item"><a href="#" class="link">第三层</a></li>
                                <li class="nav-three-item"><a href="#" class="link">第三层</a></li>
                            </ul>
                        </li>
                        <li class="nav-two-item"><a href="#" class="link">供应链物流</a></li>
                        <li class="nav-two-item"><a href="#" class="link">供应链物流</a></li>
                        <li class="nav-two-item"><a href="#" class="link">供应链物流<span class="right iconfont icon-fanhui-r"></span></a></li>
                        <li class="nav-two-item"><a href="#" class="link">供应链物流<span class="right iconfont icon-fanhui-r"></span></a></li>
                        <li class="nav-two-item"><a href="#" class="link">供应链物流<span class="right iconfont icon-fanhui-r"></span></a></li>
                        <li class="nav-two-item"><a href="#" class="link">供应链物流<span class="right iconfont icon-fanhui-r"></span></a></li>
                    </ul>
                </li>
                <li class="nav-item"><a href="#" class="link"><span>客户案例</span></a></li>
                <li class="nav-item"><a href="#" class="link"><span>解决方案</span></a></li>
                <li class="nav-item"><a href="#" class="link"><span>新闻中心</span></a></li>
                <li class="nav-item"><a href="#" class="link"><span>关于荆艺</span></a></li>
            </ul>

css部分：

.nav .nav-list{
    position: absolute;
    left: 355px;
    top: 51px;
}

.nav-list .nav-item{
    position: relative;
    float: left;
    display: block;
    width: 120px;
    height: 53px;
    line-height: 53px;
    text-align: center;
    font-size: 14px;
}

.nav-list .nav-item>a{
    width: 100%;
    height: 100%;
    display: block;
}
.nav-list .nav-item:hover>a{
    background: #0098b0;
    color: #fff;
}

.nav-list .nav-item.active:hover>a{
    background: #FFF;
    color: #05adc8;
}

.nav-list .nav-item.active>a span{
    display: inline-block;
    height: 100%;
    background: #FFF;
    color: #05adc8;
    border-bottom: 2px solid #05adc8;
}

/* 二级 */
.nav-two{
    position: relative;
    background: #0098b0;
}
.nav-two,.nav-three{
    position: absolute;
    display: none;
    color: #fff;
    width: 175px;
}
.nav-item:hover .nav-two,
.nav-two-item:hover .nav-three{
    display: block;
}
.nav-two .nav-two-item,
.nav-three .nav-three-item{
    position: relative;
    height: 34px;
    line-height: 34px;
    text-align: left;
    padding-left: 12px;
}
.nav-two .nav-two-item>a,
.nav-three .nav-three-item>a{
    display: block; 
    height: 100%;
    color: #fff;
    font-size: 14px
}
.nav-two .nav-two-item>a span.right{
    position: relative;
    left: 65px;
    font-size: 14px;
    top: 1px;
}

.nav-two .nav-two-item:hover{
    background: #05adc8;
}

/* 第三层级 */
.nav-three{
    width: 200px;
    position: absolute;
    left: 175px;
    top: 0;
    background: #05adc8;
}