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>