經常使用菜單

<div class="topBar">
<ul id="menu">
<li class="menu1"><a href="#">個人收藏</a></li>
<li class="menu2"><a href="#">個人消息</a></li>
<li class="menu3"><a href="#">個人歌手</a></li>
<li class="menu4"><a href="#">個人音樂</a></li>
</ul>
</div>

<div class="newMenu">
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>

function getTop(e){
    var offset=e.offsetTop;
    if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
    return offset;
}

function getLeft(e2) {
    if (e2.offsetParent)
        return (e2.offsetLeft + getLeft(e2.offsetParent));
    else 
        return (e2.offsetLeft);
}

$(function(){
  show=false;
  $("#menu li").each(function(){
    $(this).hover(function(){                          
      var top=getTop(this)+30
      var left=getLeft(this)
      $(".newMenu").show().css({"position":"absolute","left":left,"top":top})    
      show=true;
      },function(){
      show=false;
      setTimeout("newMenuHide()",1000);
      })                      
   })
  
  $(".newMenu").hover(function(){
     show=true;
     },function(){
    show=false;newMenuHide();
 })  
});

function newMenuHide(){

 setTimeout(function(){

　　if(show==false){ $(".newMenu").hide(); } 

},1000);

}