二级菜单效果（3）

 

html代码结构:

<li class="menu">
	<div><span class="l">&nbsp;</span><a href="#">线路</a><span class="r">&nbsp;</span></div>
	<ol>
		<li><a href="#">线路预订</a></li>
		<li><a href="#">线路管理</a></li>
	</ol>
</li> 

 菜单按照上面的结构<li class="menu"></li>循环下去

 

js代码结构:

<script type="text/javascript">
	$(document).ready(function(){
		$(".nav li.menu").each(function(){
			$(this).hover(
				function(){
					$(this).addClass("menu_hover");
					positionEvent("ol",this);
					$("ol",this).fadeIn("fast");},
				function(){$(this).removeClass("menu_hover");});
				if(document.all){
					$(this).hover(
						function(){
							$(".nav li.menu").removeClass("menu_hover2");
							positionEvent("ol",this);
							$(this).addClass("menu_hover menu_hover2");},
						function(){
							$(this).removeClass("menu_hover menu_hover2");}
					);
				}
		});
	});
	function positionEvent(object,id){
		var liWidth = $(id).width();
		var olWidth = $(object,id).width();
		var offset = $(id).offset();
		var leftPosition = offset.left - (olWidth - liWidth)/2;
		$(object,id).css("left",leftPosition);
	}
</script>

 positionEvent()是用来为二级菜单定位的方法，leftPosition值是子菜单相对于父菜单水平居中时距离父容器的左距离。

 

二级菜单绝对定位后用top:-999px隐藏起来，然后支持伪类的浏览器就可以不运行if(document.all){}，通过:hover方法让top:25px就能让二级菜单显示出来达到效果。

ie浏览器不支持伪类，if(document.all){}就是为ie而写的，通过鼠标略过和移走分别添加和移除menu_hover2样式，其目的和:hover一样让top:25px.

 

二级菜单效果（1）

二级菜单效果（2）