jq ajax写二级导航,jQuery实现二级导航菜单的示例

实用JQ实现导航二级菜单效果，导航菜单在网站中非常常见，有的网站可能会出现三级菜单及多级菜单模式，下面我们来简单的实现一个二级菜单的效果。

部分效果截图：

整体代码：

导航菜单案例

*{

padding: 0;

margin: 0;

}

ul,li{

list-style: none;

}

a{

text-decoration: none;

}

nav{

width: 1140px;

height: 40px;

margin: 0 auto;

border:solid 1px #CCC;

position: relative;

}

nav ul li{

width: 150px;

line-height: 40px;

float: left;

}

nav ul li a{

display: block;

width: 100%;

float: left;

color: #444;

font-size: 14px;

text-align: center;

}

nav>ul>li:hover{

background: #f5f5f5;

}

nav ul li ul{

display: none;

width: 150px;

position: absolute;

background-color: #f5f5f5;

overflow: hidden;

top:41px;

}

nav ul li ul li{

float: left;

border-bottom: solid 1px #CCC;

}

nav ul li ul li:last-child{

border: none;

}

nav>ul>li>ul>li:hover a{

background-color: #444;

color: #FFF;

}

• 首页
• 联系我们
• 在线留言

• 新闻资讯

  • 国内资讯
  • 国内资讯

• 产品中心

  • 除雪机
  • 运雪车
• 案例展示

var $li = $("nav > ul > li");

$li.mouseenter(function () {

$(this).children("ul").stop().slideDown();

});

$li.mouseleave(function () {

$(this).children("ul").stop().slideUp();

});

以上就是jQuery实现二级导航菜单的示例的详细内容，更多关于jQuery实现二级导航菜单的资料请关注脚本之家其它相关文章！