html布局:
首排导航和下拉的内容分成两个div写。
<div class="nav">
<ul class="menu">
<li>
<a href="index.html" style="background: #d31017;">首页</a>
</li>
<li>
<a href="online.html">网上服务</a>
</li>
<li>
<a href="product.html">产品服务</a>
</li>
<li>
<a href="business.html">业务联系</a>
</li>
<li>
<a href="custom.html">客户反馈</a>
</li>
<li>
<a href="aboutus1.html">关于我们</a>
</li>
<li>
<a href="destin.html">实用网址</a>
</li>
<li>
<a href="rencai.html">人才加盟</a>
</li>
</ul>
</div>
下拉内容:
<!--首页下拉-->
<div class="slide_nav"></div>
<!-- 网上服务下拉-->
<div class="slide_nav">
<ul class="smenu">
<li>
<a href="#" style="font-size:16px; color:#0a4e8f; font-weight:bold;">
<img src="images/slide_nav.jpg" />网上服务</a>
</li>
<li>
<a href="#">
<img src="images/slide_nav2.jpg" />订舱查阅</a>
</li>
<li>
<a href="#">
<img src="images/slide_nav2.jpg" />GPS动态</a>
</li>
<li>
<a href="#">
<img src="images/slide_nav2.jpg" />仓储服务</a>
</li>
<li>
<a href="#">
<img src="images/slide_nav2.jpg" />船公司服务</a>
</li>
<li>
<a href="#">
<img src="images/slide_nav2.jpg" />阳光积分</a>
</li>
<li>
<a href="#">
<img src="images/slide_nav2.jpg" />单据下载</a>
</li>
</ul>
<div class="clear"></div>
</div>
....
....(等等下拉内容)
js内容:
$(document).ready(function () {
var timer22 = null;
var i22;
$(".menu li").hover(function () {
var i22 = $(this).index();
var j = $(".menu li").length;
$(this).addClass("nav_ul_li_current").siblings("li").removeClass("nav_ul_li_current");
if (i22 != 0 && i22 != 3 && i22 != 4 && i22 != 7) {
clearTimeout(timer22);
timer22 = setTimeout(function () {
$(".slide_nav").eq(i22).slideDown().siblings(".slide_nav").hide();
}, 30)
} else {
$(".slide_nav").hide();
}
},
function () {
$(".menu li").removeClass("nav_ul_li_current");
timer22 = setTimeout(function () {
$('.slide_nav').hide();
}, 200)
});
$(".slide_nav").hover(function () {
clearTimeout(timer22);
$(".menu li").eq(i22).addClass("nav_ul_li_current").siblings("li").removeClass("nav_ul_li_current");
}, function () {
clearTimeout(timer22);
timer22 = setTimeout(function () {
$(this).hide();
$(".slide_nav").hide();
$(".menu li").removeClass("nav_ul_li_current");
}, 200)
});
});
效果: