用Jquery方法实现的简单下滑菜单效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <script src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function () { $('#zimenu').mouseenter(function () { $('#hua').slideDown(); }).mouseleave(function () { $('#hua').slideUp(); }); }); </script> <style type="text/css"> li{ float:left; display:inline; } </style> </head> <body> <div> <ul id="menu"> <li id="zimenu">111111 <div id="hua" style="width:60px;display:none"> <a href="#">1111111</a> <a href="#">1111111</a> <a href="#">1111111</a> <a href="#">1111111</a> </div> </li> <li>44444</li> <li>5555</li>
</ul> </div> </body> </html>