CSS实现百度百科菜单导航

分享一个纯css制作的二级下拉导航菜单，仿的百度百科，效果基本一模一样。

分类：导航菜单 > 下拉导航难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

首先在.nav-content-box放置多个一级菜单li，和对应的二级下拉菜单ul

<ul class="nav-content-box">
    <li class="index on">
        <span><a href="http://www.sucaihuo.com/">首页</a></span>
    </li>
    <li class="cat">
        <span><a href="http://www.sucaihuo.com/js">分类</a></span>
        <ul>
            <li><a href="http://www.sucaihuo.com/js">自然</a></li>
            <li><a href="http://www.sucaihuo.com/php">文化</a></li>
            <li><a href="http://www.sucaihuo.com/js/450.html">地理</a></li>
            <li><a href="http://www.sucaihuo.com/templates/292.html">历史</a></li>
            <li><a href="http://www.sucaihuo.com/templates/293.html">生活</a></li>
            <li><a href="http://www.sucaihuo.com/templates/290.html">社会</a></li>
            <li><a href="http://www.sucaihuo.com/js/1.html">艺术</a></li>
        </ul>
    </li>
    <li class="special ">
        <span><a href="javascript:void(0)">特色百科</a></span>
        <ul>
            <li><a href="#/calendar/">历史上的今天</a></li>
            <li><a href="#/museum/">数字博物馆</a></li>
        </ul>
    </li>
</ul>

定义下拉导航菜单背景层

.nav-bg{
    position: absolute;
    width: 100%;
    height: 272px;
    background: #24619c;
    background:rgba(36,97,158,.95);
    -webkit-transition: .3s;
    transition: .3s;
    z-index: 9999;
}

显示下拉菜单

.nav-bar:hover{
    overflow: visible;
    -webkit-transition:all 0.5s ease;
    transition:all 0.5s ease;
}