第一个菜单实现的是点击菜单项显示相应的子菜单项，三角变为向下的三角。下面的菜单鼠标移动到菜单项显示对应的子菜单项，鼠标移开子菜单消失。
下面介绍它的代码部分：
html代码：
head代码部分添加标题及引用：
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head> <title>JQuery实战-菜单效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/menu.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/menu.js"></script> </head></span>
body部分编辑菜单项内容，通过嵌套的ul和li来表示，菜单最外层为ul，一层每个主菜单放在一个li中。如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套就可以构建多层的菜单。
<span style="font-family:KaiTi_GB2312;font-size:18px;"><body> <ul> <li class="main"> <a href="#">菜单项1</a> <ul style="display:none;"> <li> <a href="#">子菜单项11</a> </li> <li> <a href="#">子菜单项12</a> </li> </ul> </li> <li class="main"> <a href="#">菜单项2</a> <ul> <li> <a href="#">子菜单项21</a> </li> <li> <a href="#">子菜单项22</a> </li> </ul> </li> <li class="main"> <a href="#">菜单项3</a> <ul> <li> <a href="#">子菜单项31</a> </li> <li> <a href="#">子菜单项32</a> </li> </ul> </li> </ul> <br/> <ul> <li class="hmain"> <a href="#">菜单项1</a> <ul> <li> <a href="#">子菜单项11</a> </li> <li> <a href="#">子菜单项12</a> </li> </ul> </li> <li class="hmain"> <a href="#">菜单项2</a> <ul> <li> <a href="#">子菜单项21</a> </li> <li> <a href="#">子菜单项22</a> </li> </ul> </li> <li class="hmain"> <a href="#">菜单项3</a> <ul> <li> <a href="#">子菜单项31</a> </li> <li> <a href="#">子菜单项32</a> </li> </ul> </li> </ul> </body></span>
css代码部分
1.浏览器中的ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进
2.list-style属性值为none,可清除ul和li前面的小圆点。
3.清除缩进值，padding和margin都为0，其中IE6 IE7需要把margin为0的时候才可以清除缩进值。
<span style="font-family:KaiTi_GB2312;font-size:18px;">ul,li{ list-style:none; } ul{ padding:0; margin:0; } .main,.hmain{ background-image:url(../images/title.gif); background-repeat:repeat-x; width:120px; } li{ background-color:#EEEEEE; } a { text-decoration:none; padding-left:20px; display:block; display:inline-block; width:100px; padding-top:3px; padding-bottom:3px; } .main a,.hmain a { color:white; background-image:url(../images/collapsed.gif); background-repeat:no-repeat; background-position:3px center; } .main li a ,.hmain li a{ color:black; background-image:none; padding-left:18px; } .main ul,.hmain ul{ display:none; } .hmain{ float:left; margin:1px; }</span>
menu.js代码：
1.main a选择使用了.main这个class的元素内部所有的a节点
2.main>a选择.main子节点中的a节点
<span style="font-family:KaiTi_GB2312;font-size:18px;">$(document).ready(function(){ //页面的Dom已经装载完成时，执行的代码 $(".main > a,.hmain a").click(function(){ //找到主菜单项对应的子菜单项 var ulNode = $(this).next("ul"); // //根据情况收缩菜单 // if(ulNode=$.css("display") == "none"){ // ulNode.css("display","block"); // }else{ // ulNode.css("display","none"); // } // ulNode.show("normal");//设置展开的速度，可以是nomal,slow,fast // ulNode.hide(); // ulNode.toggle();//toggle设置展开或者收缩 //卷帘效果，向上或者向下 // ulNode.slideDown(); // ulNode.slideUp; ulNode.slideToggle(); }); //麻烦的方法 // $(".hmain > a").hover(function(){ // $(this).next("ul").slideDown(); // }.Function(){ // var ulNode=$(this).next("ul"); // var timeoutId =setTimeout(function(){ // }) // ulNode.slideUp(); // },300); // ulNode.hover(function(){ // clearTimeout(timeoutId); // }.function(){ // $(this).slideUp(); // }); /********实现鼠标移动到指定主菜单后子菜单自动显示*****/ $(".hmain").hover(function(){ $(this).children("ul").slideDown(); },function(){ $(this).children("ul").slideUp(); }); }); /* *修改主菜单的指示图标随着子菜单的变化而变化 * */ function changeIcon(mainNode) { if (mainNode) { if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) { mainNode.css("background-image","url('images/expanded.gif')"); } else { mainNode.css("background-image","url('images/collapsed.gif')"); } } } </span>
以上就是本文的全部内容，希望能够帮助大家更好的实现制作菜单效果。
