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>