<style type="text/css"> *{margin:0;padding:0;} body{padding:10px 200px; font:13px/1.75 "宋体",Tahoma, Geneva, sans-serif;} ul li{ list-style:none;} .menu-demo .nav li{float:left;} .menu-demo .nav li.menu{ position:relative;} .menu-demo .nav1,.menu-demo .nav2,.menu-demo .nav3,.menu-demo .nav4{width:150px;height:32px;display:block; border:2px blue solid;} .menu-demo .nav li .smenu{ position:absolute;width:300px;height:300px; background: #0CF; border:1px red solid;display:none;} .menu-demo .nav li a.on{border:2px green solid;} .menu-demo .nav li ul li{clear:both;} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(e) { // -- mouseover事件触发 --- // $(".menu").mouseover(function(){ // $(this).children(".smenu").fadeIn("fast"); // }) // .mouseout(function(){ // $(this).children(".smenu").hide(); // }) // -- mousenter事件触发 --- $(".menu").mouseenter(function(){ $(this).children(".smenu").fadeIn("fast"); }) .mouseleave(function(){ $(this).children(".smenu").hide(); }) }) </script> <div class="menu-demo"> <ul class="nav"> <li class="menu"> <a href="#" class="nav1">菜单一</a> <div class="smenu">(菜单一)二级菜单内容 <ul> <li><a href="#">二级菜单链接</a></li> </ul> </div> </li> <li><a href="#" class="nav2">菜单二</a></li> <li class="menu"> <a href="#" class="nav3">菜单三</a> <div class="smenu">(菜单三)二级菜单内容</div> </li> <li class="menu"> <a href="#" class="nav4">菜单四</a> <div class="smenu">(菜单四)二级菜单内容</div> </li> </ul> </div>