1：主要学习实现这种菜单的方法之一
结构:<ul>
<li>
<span>菜单1</span>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li>
<span>菜单2</span>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
<style type="text/css"> ul li{ background-color: aquamarine; float: left; margin-left: 5px; } li ul, li ul li{ background-color: pink; text-indent: 30px; } li ul li{ float: none; } </style> <script> $(function () { $("#one").mousemove(function () { $("#one_ul").css("display","block"); }).mouseout(function () { $("#one_ul").css("display","none"); }); $("#tow").mousemove(function () { $("#tow_ul").css("display","block"); }).mouseout(function () { $("#tow_ul").css("display","none"); }); $("#thr").mousemove(function () { $("#thr_ul").show(600);//如果调用 show 或者hide 就会出现动画效果 慢慢显示或者慢慢消失的效果 与什么直接设置css的方式对比 }).mouseout(function () { $("#thr_ul").hide(400); }); }) </script> </head> <body> <div class="warp"> <ul> <li> <h2 id="one">第一个标签选择</h2> <ul id="one_ul" style="display:none"> <li>ul li1 ul li1</li> <li>ul li1 ul li1</li> <li>ul li1 ul li1</li> <li>ul li1 ul li1</li> <li>ul li1 ul li1</li> </ul> </li> <li> <h2 id="tow">第二个标签选择</h2> <ul id="tow_ul" style="display:none"> <li>ul li2 ul li2</li> <li>ul li2 ul li2</li> <li>ul li2 ul li2</li> <li>ul li2 ul li2</li> <li>ul li2 ul li2</li> </ul> </li> <li> <h2 id="thr">第三个标签选择</h2> <ul id = thr_ul style="display:none"> <li>ul li3 ul li3</li> <li>ul li3 ul li3</li> <li>ul li3 ul li3</li> <li>ul li3 ul li3</li> <li>ul li3 ul li3</li> </ul> </li> </ul> </div> </body> </html>
