ajax导航怎么做菜单,jQuery实现菜单栏导航效果

*{

padding: 0px;

margin: 0px;

}

#top{width: auto;height: 30px;background: #eee;position: relative;}

#top li{float: left;

text-align: center;

width: 80px;

height:30px;

line-height:30px;

list-style: none;

}

/*设置位置*/

.position{

position: absolute;

border: 1px solid #ccc;

top:30px;

padding: 3px;

font-size: 15px;

display: none;

}

.shoucang{width: auto;left: 10px;}

.sell{width: auto;left: 70px;}

.customer{width: auto;left: 180px;}

.bg{background-color: #DDA0DD;cursor: pointer;}

$(function(){

$(".li1").hover(function(){

$(".shoucang").show();/*显示收藏的菜单内容*/

$(".customer,.sell").hide();/*隐藏其他的菜单内容*/

},function(){

$(".shoucang").hide();/*鼠标离开，收藏的菜单内容隐藏*/

});

$(".li2").hover(function(){

$(".sell").show();

$(".customer,.shoucang").hide();

},function(){

$(".sell").hide();

});

$(".li3").hover(function(){

$(".customer").show();

$(".shoucang,.sell").hide();

},function(){

$(".customer").hide();

});

$("#top div").hover(function(){/*鼠标放置在div位置上，显示下拉菜单*/

$(this).show();

},function(){/*鼠标离开在div位置上，隐藏下拉菜单*/

$(this).hide();

});

$(".sell p,.shoucang p,.customer p").bind("mouseover",function(){

$(this).addClass("bg");

});

$(".sell p,.shoucang p,.customer p").bind("mouseout",function(){

$(this).removeClass("bg");

});

});

• 收藏夹
• 卖家中心
• 联系客服

收藏的宝贝

收藏的店铺

免费开店

已出售的报宝贝

出售中的报宝贝

卖家服务市场

消费者客服

卖家客服