js实现简单的导航下拉菜单

<div class="navigation_bg">

     <ul>

          <li id="nav1"><a class="aNav" href='/shyf201507217894/index.aspx'>首页</a></li>

          <li id="nav2" name="公司简介">

             <a class="aNav" href='/shyf201507217894/index_20.aspx'>公司介绍</a>

             <div class="subNav">

                <dl>

                   <dd id="subNav20"><a href="/shyf201507217894/index_20.aspx">云峰集团介绍</a></dd>

                   <dd id="subNav55"><a href="/shyf201507217894/index_55.aspx">汽车产业介绍</a></dd>

                   <dd id="subNav56"><a href="/shyf201507217894/index_56.aspx">商用车公司介绍</a></dd>

                </dl>

             </div>

          </li>

          <li id="nav3" name="新闻中心">

              <a class="aNav" href='/shyf201507217894/list_23.aspx'>新闻中心</a>

              <div class="subNav">

                <dl>

                   <dd id="subNav23"><a href="/shyf201507217894/list_23.aspx">企业动态</a></dd>

                   <dd id="subNav25"><a href="/shyf201507217894/list_25.aspx">行业新闻</a></dd>

                   <dd id="subNav27"><a href="/shyf201507217894/list_27.aspx">促销活动</a></dd>

                </dl>

             </div>

          </li>

    </ul>

</div>







.top .navigation_bg{ height:40px; width:100%; margin:0 auto; position:relative; z-index:10;}

.top .navigation_bg li{ line-height:40px; width:150px; float:left; height:100%; text-align:center; position:relative;}

.top .navigation_bg li a.aNav{ background:url(../images/nav_line.jpg) no-repeat right center #0188c8;}

.top .navigation_bg li a{ font-size:16px; color:#ffffff; font-family:微软雅黑; display:block; width:150px; height:100%;}

.toppen{ background:#fff;}

.top .navigation_bg li a.aNav:hover,.top .navigation_bg .subNav dd a:hover,.top .navigation_bg li.onnav a.aNav{ background:#036CA0;}

.top .navigation_bg li .subNav{ position:absolute; left:0; top:40px; background:#0188C8; display:none;}

.top .navigation_bg .subNav dd{ line-height:30px;}

.top .navigation_bg .subNav dd a{ font-size:12px;}










<script type="text/javascript">

    //导航选中

    $("#nav" + navID).addClass("onnav");

 

    $(".navigation_bg li").each(function () {

        $(this).hover(function () {

            $(this).addClass("onnav").siblings().removeClass("onnav");

            $(this).find(".subNav").show();

        }, function () {

            $("#nav" + navID).addClass("onnav").siblings().removeClass("onnav");

            $(this).find(".subNav").hide();

        });

    });

</script>