jQuery仿中企动力官网下拉导航效果

使用方法：

引入CSS样式文件

<!--通用样式-->
<link href="css/common.css" rel="stylesheet" type="text/css" />
<!--核心样式-->
<link rel="stylesheet" type="text/css" href="css/public.css">

引入jQuery库文件、特效JS文件

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/public.js"></script>

HTML结构

<div class="header">
    <div class="header_bg"></div>
    <div class="container head">
        <h1 class="logo"><a href="#" title='中企动力企业网站建设'>中企动力企业网站建设</a></h1>
        <ul class="nav">
            <li class="d_2"><a href="#">网站建设</a></li>
            <li class="d_2"><a href="#">营销推广</a></li>
            <li class="d_2"><a href="#">企业服务</a></li>
            <li class="d_2"><a href="#">网站攻略</a></li>
            <li class="d_2"><a href="#">案例中心</a></li>
            <li class="d_2"><a href="#">关于中企</a></li>
        </ul>
    </div>
    <div class="subnav">
        <div class="subnav_bg"></div>
        <div class="subnav_con">
            <ul style="display:none">
                    <li class="d_2"><a href="#">企业官方网站</a></li>
                    <li class="d_2"><a href="#">全网营销网站</a></li>
                    <li class="d_2"><a href="#">移动手机建站</a></li>
                    <li class="d_2"><a href="#">企业网上商城</a></li>
                    <li class="d_2"><a href="#">移动营销网站</a></li>
              </ul>
              
              <ul style="display:none">
                    <li class="d_2"><a href="#">国内营销</a></li>
                    <li class="d_2"><a href="#">海外推广</a></li>
              </ul>
              
              <ul style="display:none">
                    <li class="d_2"><a href="#">企业邮箱</a></li>
                    <li class="d_2"><a href="#">企业域名</a></li>
                    <li class="d_2"><a href="#">高端设计</a></li>
                    <li class="d_2"><a href="#">可信网站</a></li>
                </ul>
                
                <ul style="display:none">
                    <li class="d_2"><a href="#">免费报价</a></li>
                    <li class="d_2"><a href="#">0元体验</a></li>
                    <li class="d_2"><a href="#">网站体检</a></li>
                </ul>
                <ul style="display:none">
                    <li class="d_2"><a href="#">行业案例</a></li>
                    <li class="d_2"><a href="#">服装行业</a></li>
                    <li class="d_2"><a href="#">包装行业</a></li>
                    <li class="d_2"><a href="#">餐饮行业</a></li>
                </ul>
                <ul style="display:none">
                    <li class="d_2"><a href="#">企业介绍</a></li>
                    <li class="d_2"><a href="#">资讯中心</a></li>
                    <li class="d_2"><a href="#">信息讲堂</a></li>
                    <li class="d_2"><a href="#">售后服务</a></li>
                    <li class="d_2"><a href="#">工作机会</a></li>
                </ul>
          </div>
    </div>
</div>