<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script> $(function(){ var menu = $('.menu'); menu.hover(function(){ $(this).children('ul').show(); },function(){ $(this).children('ul').hide(); }); }); </script> <style> *{margin: 0;padding: 0;} li{list-style: none;} body{margin: 50px;} .hide{display: none;} .menu{cursor: pointer;} </style> </head> <body> <ul> <li class="menuLevel1 menu"> <span>一级菜单</span> <ul class="hide"> <li class="menuLevel2 menu"> <span>二级菜单</span> <ul class="hide"> <li class="menuLevel3 menu"> <span>三级菜单</span> </li> </ul> </li> </ul> </li> </ul> </body> </html>