二级菜单效果（3）

ice-cream

 
html代码结构:
<li class="menu"><div><span class="l"> </span><a href="#">线路</a><span class="r"> </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）