只要你喜欢，无限极联动菜单
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body{background-color:#435a9d;} ul,li{margin:0;padding:0;} .abc{ width:124px; height:480px; margin:100px; } .abc_ul{ width:100%; height:100%; } .abc_ul li{ position:relative; list-style:none; width:100%; height:48px; border:1px solid #999; line-height:48px; text-align:center; background-color:#CCC; color:#FFF; font-size:16px; cursor:pointer; } .abc_ul li ul{ display:none; position:absolute; width:100%; height:auto; left:124px; top:0px; } .abc_ul li ul li{ width:100%; height:36px; } .addcolor{ background-color:#666 !important; } </style> </head> <script src="../js/jquery.js"></script> <script> $(document).ready(function(){ $(".abc_ul li").each(function(index){ $(this).mouseover(function(){ $(this).addClass('addcolor').children('ul').show().parent('li').siblings().children('ul').hide(); $(this).siblings().removeClass('addcolor') }).mouseout(function(){ $(this).children().hide(); }) }) }) </script> <body> <div class="abc"> <ul class="abc_ul"> <li>1 <ul> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> </ul> </li> <li>2 <ul> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> </ul> </li> <li>3 <ul> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> </ul> </li> <li>4 <ul> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> </ul> </li> <li>5 <ul> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> </ul> </li> </ul> </div> </body> </html>