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

最新推荐文章于 2018-10-01 22:42:09 发布

qq_29026593

最新推荐文章于 2018-10-01 22:42:09 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_29026593/article/details/78845902

本文介绍了一个网站的导航菜单设计，包括首页、公司介绍、新闻中心等主要部分，并详细展示了各部分的链接及下拉子菜单的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>