为大家提供一种简易的菜单的制作方法，代码如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href=""> <title></title> </head> <style> body{margin: 0;padding: 0} ul li{list-style-type:none;margin: 0px;padding: 0;text-align: right;} ul{;padding: 0;background:#eeeeee;width: 90px;} .mm{background:#252525;text-align: center;} a{color: #ffffff} .mm ul li a{color: blue} </style> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".mm>a").click(function(){ var ulNode = $(this).next("ul"); //if(ulNode.css("display")=="none"){ // ulNode.css("display","block") //}else{ // ulNode.css("display","none") //} //ulNode.toggle(0) ulNode.slideToggle() }) $(".dmm").hover(function() { $(this).children("ul").slideDown(); },function(){ $(this).children("ul").slideUp(); }) }) </script> <body> <ul> <li class="mm"> <a href="#">菜单1</a> <ul> <li><a href="http://turbo12138.iteye.com/blog/profile">子菜单1</a></li> <li><a href="http://turbo12138.iteye.com/blog/profile">子菜单2</a></li> </ul> </li> <li class="mm"> <a href="#">菜单2</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> <li class="mm"> <a href="#">菜单3</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> </ul> <br> <br> <!--<ul>--> <!--<li class="dmm">--> <!--<a href="#">菜单1</a>--> <!--<ul>--> <!--<li><a href="#">子菜单1</a></li>--> <!--<li><a href="#">子菜单2</a></li>--> <!--</ul>--> <!--</li>--> <!--<li class="dmm">--> <!--<a href="#">菜单2</a>--> <!--<ul>--> <!--<li><a href="#">子菜单1</a></li>--> <!--<li><a href="#">子菜单2</a></li>--> <!--</ul>--> <!--</li>--> <!--<li class="dmm">--> <!--<a href="#">菜单3</a>--> <!--<ul>--> <!--<li><a href="#">子菜单1</a></li>--> <!--<li><a href="#">子菜单2</a></li>--> <!--</ul>--> <!--</li>--> <!--</ul>--> </body> </html>
原文：http://www.cnblogs.com/turbo12138/p/5720819.html