这是一款纯CSS:hover属性制作百度百科官网导航菜单样式，鼠标悬停导航条显示全部下拉菜单代码。

使用方法

在页面引入要使用的style.css样式代码

<link href="css/style.css" rel="stylesheet" type="text/css" />

Html结构

在网站需要显示的地方引入Html代码

<div class="header">
    <div class="top-bar">
        <h3>头部代码位置 —— CSS仿百科下拉导航菜单特效代码</h3>
    </div>
    <div class="nav-bar">
        <div class="nav-bg">
            <div class="nav-top">
                <div class="nav-content">
                    <ul class="nav-content-box">
                        <li class="index on">
                            <span><a href="#">首页</a></span>
                        </li>
                        <li class="cat">
                            <span><a href="#">分类</a></span>
                            <ul>
                                <li><a href="#">自然</a></li>
                                <li><a href="#">文化</a></li>
                                <li><a href="#">地理</a></li>
                                <li><a href="#">历史</a></li>
                                <li><a href="#">生活</a></li>
                                <li><a href="#">社会</a></li>
                                <li><a href="#">艺术</a></li>
                                <li><a href="#">人物</a></li>
                                <li><a href="#">经济</a></li>
                                <li><a href="#">科技</a></li>
                                <li><a href="#">体育</a></li>
                            </ul>
                        </li>
                        <li class="special ">
                            <span><a href="javascript:void(0)">特色百科</a></span>
                            <ul>
                                <li><a href="#">历史上的今天</a></li>
                                <li><a href="#">数字博物馆</a></li>
                                <li><a href="#">城市百科</a></li>
                                <li><a href="#">高校百科</a></li>
                                <li><a href="#">艺术百科</a></li>
                                <li><a href="#">科学百科</a></li>
                            </ul>
                        </li>
                        <li class="user">
                            <span><a href="javascript:void(0)">用户</a></span>
                            <ul>
                                <li><a href="#">蝌蚪团</a></li>
                                <li><a href="#">燃梦计划</a></li>
                                <li><a href="#">百科任务</a></li>
                                <li><a href="#">百科商城</a></li>
                            </ul>
                        </li>
                        <li class="cooperation">
                            <span><a href="javascript:void(0)">权威合作</a></span>
                            <ul>
                                <li><a href="#">合作模式</a></li>
                                <li><a href="#">常见问题</a></li>
                                <li><a href="#">联系方式</a></li>
                            </ul>
                        </li>
                        <li class="mobile">
                            <span><a href="javascript:void(0)">手机百科</a></span>
                            <ul>
                                <li><a href="#">客户端</a></li>
                                <li><a href="#">网页版</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>