SOURCE

<div class="navbar-wrapper">
    <div class="nav-hide-bg">
        <div class="navbar_w">
            <div class="navbar clearfix">
                <dl class="nav-item">
                    <dt>
                        <a href="/">首页</a>
                    </dt>
                </dl>
                <dl class="nav-item nav-item-fenlei">
                    <dt>
                        <a href="#">分类</a>
                    </dt>
                    <dd class="nav-item-dd">
                        <div><a href="#">艺术</a></div>
                        <div><a href="#">科技</a></div>
                        <div><a href="#">自然</a></div>
                        <div><a href="#">文化</a></div>
                        <div><a href="#">地理</a></div>
                        <div><a href="#">生活</a></div>
                        <div><a href="#">社会</a></div>
                        <div><a href="#">人物</a></div>
                        <div><a href="#">经济</a></div>
                        <div><a href="#">体育</a></div>
                        <div><a href="#">历史</a></div>
                    </dd>
                </dl>
                <dl class="nav-item">
                    <dt>
                        <a href="#">特色百科</a>
                    </dt>
                    <dd class="nav-item-dd">
                        <div><a href="#">历史上的今天</a></div>
                        <div><a href="#">数字博物馆</a></div>
                        <div><a href="#">史记·2015</a></div>
                        <div><a href="#">城市百科</a></div>
                        <div><a href="#">二战百科</a></div>
                        <div><a href="#">非遗百科</a></div>
                    </dd>
                </dl>
                <dl class="nav-item">
                    <dt>
                        <a href="#">用户</a>
                    </dt>
                    <dd class="nav-item-dd">
                        <div><a href="#">蝌蚪团</a></div>
                        <div><a href="#">燃梦计划</a></div>
                        <div><a href="#">百科任务</a></div>
                        <div><a href="#">百科商城</a></div>
                    </dd>
                </dl>
                <dl class="nav-item">
                    <dt>
                        <a href="#">权威合作</a>
                    </dt>
                    <dd class="nav-item-dd">
                        <div><a href="#">合作模式</a></div>
                        <div><a href="#">常见问题</a></div>
                        <div><a href="#">联系方式</a></div>
                    </dd>
                </dl>
                <dl class="nav-item nav-item-shouji">
                    <dt>
                        <a href="#">手机百科</a>
                    </dt>
                    <dd class="nav-item-dd">
                        <div><a href="#">客户端</a></div>
                        <div><a href="#">网页版</a></div>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</div>  <!-- navbar-wrapper end -->
<p>test文字 111111111.. . . . . . . . </p>

/*css reset */
 body,p,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,iframe,nav {
    margin: 0;
    padding: 0;
} 
body {
    font: 14px Microsoft YaHei;
    color: #333;
} 
a {
    text-decoration: none; 
}
a,input,pre {
    outline: none;
}
ol,ul {
    list-style: none;
} 
.clearfix:after {
    display: block;
    content: "";
    clear: both;
}
.navbar-wrapper {
    width: 100%;
    height: 45px;
    background: rgba(69,157,245,1);
    margin: 95px 0 0 0;
    padding: 0 0 0 0;
    position: relative;
    z-index: 1000;
}
.nav-hide-bg {
    width: 100%;
    min-height: 0;
    background: rgba(44,100,160,.9);
    position: absolute;
    top: 45px;
}
.navbar-wrapper .navbar_w {
    width: 1180px;
    margin: -45px auto 0 auto;
}
.navbar_w .navbar {
    width: 660px;
    position: relative;
}
.navbar .nav-item {
    width: 110px;
    float: left;
}
.nav-item dt {
    width: 110px;
    height: 45px;
    text-align: center;
}
.nav-item dt a {
    font: 16px/45px Microsoft YaHei;
    color: #f5f5f5;
    display: block;
}
.nav-item:hover,.nav-item:hover dt a {
    background: rgb(51,140,230);
    color: #fff;
}
.nav-item:hover .nav-item-dd {
    background: rgb(25,80,140);
    border-left: 1px solid transparent;
}


.nav-item .nav-item-dd {
    border-left: 1px solid rgb(58,111,162);
    max-height: 0;
    overflow: hidden;
}
.navbar:hover .nav-item .nav-item-dd {
    height: 175px;
    max-height: 250px;
    padding: 10px 0 15px 0;
    transition: max-height .5s .35s,padding .3s .35s;
}
.nav-item .nav-item-dd div {
    width: 100%;
    height: 30px;
    text-align: center;
}
.nav-item .nav-item-dd div a {
    font: 14px/30px Microsoft YaHei;
    color: #eee;
    padding-bottom: 3px;
}
.nav-item .nav-item-dd div a:hover {
    color: #fff;
    border-bottom: 2px solid #fff;
}

.navbar .nav-item-fenlei {
    font-size: 0;
    position: relative;
}
.nav-item-fenlei .nav-item-dd div {
    display: inline;
    padding: 0 0 0 17px;
}
.navbar .nav-item-fenlei:hover:before,.navbar .nav-item-shouji:hover:before {
    position: absolute;
    content: '';
    width: 998px;
    height: 200px;
    top: 45px;
}
 .navbar .nav-item-fenlei:hover:before {
    left: -998px;
}
.navbar .nav-item-shouji:hover:before {
    width: 540px;
    right: -540px;
}