jquery级联菜单

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    
$('.menu li').hover(function(){        
        $(this).children('ul').show(); 
        $(this).focus().addClass('focusa')    
    },function(){ 
        $(this).children('ul').hide(); 
        $(this).focus().removeClass('focusa'); 
}); 
        
}); 

</script> 
<style type="text/css"> 
ul{ list-style:none; margin:0; padding:0;} 

.menu { height:30px; line-height:30px;  } 
.menu li { float:left; position:relative;} /*这一级是导航*/ 
.menu li a { display:block;  height:30px; line-height:30px; padding:0 20px; } 
.menu li a:hover { color:#000; background:url(img/bg1.png);  } 
.menu li a.more { background:url(img/there.png) no-repeat 130px center; } 

.menu li ul { position:absolute; float:left;  width:150px; border:1px solid #000; display:none;} /*这是第二级菜单*/ 
.menu li ul a { width:110px; } 
.menu li ul a:hover { background:url(img/bg1.png);} 

.menu li ul ul{ top:0;left:150px;} /*从第三级菜单开始,所有的子级菜单都相对偏移*/ 
</style> 

  <ul class="menu"> 
    <li><a href="#">菜单一</a> 
      <ul class="one"> 
        <li><a href="#">菜单一</a></li> 
        <li><a href="#">菜单二</a></li> 
        <li><a href="#">菜单三</a></li> 
        <li><a href="#">菜单四</a></li> 
        <li><a href="#" class="more">菜单五</a> 
          <ul class="two"> 
            <li><a href="#">菜单一</a></li> 
            <li><a href="#">菜单二</a></li> 
            <li><a href="#">菜单三</a></li> 
            <li><a href="#">菜单四</a></li> 
            <li><a href="#" class="more">菜单五</a> 
              <ul class="three"> 
                <li><a href="#">菜单一</a></li> 
                <li><a href="#">菜单二</a></li> 
                <li><a href="#">菜单三</a></li> 
                <li><a href="#">菜单四</a></li> 
                <li><a href="#"  class="more">菜单五</a> 
               <ul class="four"> 
                <li><a href="#">菜单一</a></li> 
                <li><a href="#">菜单二</a></li> 
                <li><a href="#">菜单三</a></li> 
                <li><a href="#">菜单四</a></li> 
                <li><a href="#">菜单五</a></li> 
                </ul> 
                
                </li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
      </ul> 
    </li> 
    <li><a href="#">菜单二</a> 
      <ul class="one"> 
        <li><a href="#">菜单一</a></li> 
        <li><a href="#">菜单二</a></li> 
        <li><a href="#" class="more">菜单三</a> 
          <ul class="two"> 
            <li><a href="#">菜单一</a></li> 
            <li><a href="#">菜单二</a></li> 
            <li><a href="#"  class="more">菜单三</a> 
              <ul class="three"> 
                <li><a href="#">菜单一</a></li> 
                <li><a href="#">菜单二</a></li> 
                <li><a href="#">菜单三</a></li> 
                <li><a href="#">菜单四</a></li> 
                <li><a href="#">菜单五</a></li> 
              </ul> 
            </li> 
            <li><a href="#">菜单四</a></li> 
          </ul> 
        </li> 
      </ul> 
    </li> 
    <li><a href="#">菜单三</a></li> 
    <li><a href="#">菜单四</a></li> 
    <li><a href="#">菜单五</a> 

    <ul class="one"> 
        <li><a href="#">菜单一</a></li> 
        <li><a href="#">菜单二</a></li> 
        <li><a href="#">菜单三</a></li> 
    </ul> 
    </li> 
  </ul>