初学jquery求助

Question

<ul class="menu_2_1 fl">
                  <li><a href="index.aspx">首页</a></li>
                  <li><a href="about.aspx"  id="about">关于11</a>
                     <span id="aboutapsn" style="display:none">
                        <a href="about.aspx">集团简介</a>
                        <a href="about_3.aspx">荣誉资质</a>
                        <a href="#">企业文化</a>
                        <a href="box.aspx">总裁专栏</a>
                        <a href="">精英团队</a>
                        <a href="about_2.aspx">合作伙伴</a>
                        <a href="about_4.aspx">联系我们</a>
                        </span>
                        </li>
                <li><a href="news.aspx">资讯中心</a></li>
                <li><a href="pindao.aspx">移民服务</a></li>
                <li><a href="pinggu.aspx">在线评估</a></li>
                <li class="nb"><a href="about_4.aspx">联系我们</a></li>
              </ul>用jquery做一个二级导航怎么写啊....看视频的时候觉得挺简单的自己一座就不对啊，求给个代码吧！谢谢大神们！

Answer 1

<li><a href="about.aspx"  id="about" onmouseover ="$('#aboutapsn').show();" onmouseout ="$('#aboutapsn').hide();">关于11</a>

Answer 2

html:
<div class="webSchoolL" id="webSchoolL">
<ul class="leftTab" id="leftMeau">
<li class="listL01">1</li>
<li>
<a href="#nogo">2</a>
<ul class="navUl">
<li><a href="#nogo">22</a></li>
<li><a href="#nogo" class="curButA">22</a></li>
<li><a href="#nogo">22</a></li>
<li><a href="#nogo">22</a></li>
</ul>
</li>
<li>
<a href="#nogo">3</a>
<ul class="navUl">
<li><a href="#nogo">33</a></li>
<li><a href="#nogo" class="curButA">33</a></li>
<li><a href="#nogo">33</a></li>
<li><a href="#nogo">33</a></li>
</ul>
</li>
<li>
<a href="#nogo">4</a>
<ul class="navUl">
<li><a href="#nogo">44</a></li>
<li><a href="#nogo" class="curButA">44</a></li>
<li><a href="#nogo">44</a></li>
<li><a href="#nogo">44</a></li>
</ul>
</li>
<li>
<a href="#nogo">5</a>
<ul class="navUl">
<li><a href="#nogo">55</a></li>
<li><a href="#nogo" class="curButA">55</a></li>
<li><a href="#nogo">55</a></li>
<li><a href="#nogo">55</a></li>
</ul>
</li>
<li>
<a href="#nogo" class="curButA">6</a>
<ul class="navUl" style="display:block;">
<li><a href="#nogo">66</a></li>
<li><a href="#nogo" class="curButA">66</a></li>
<li><a href="#nogo">66</a></li>
<li><a href="#nogo">66</a></li>
</ul>
</li>
<li>
<a href="#nogo">7</a>
<ul class="navUl">
<li><a href="#nogo">77</a></li>
<li><a href="#nogo" class="curButA">77</a></li>
<li><a href="#nogo">77</a></li>
<li><a href="#nogo">77</a></li>
</ul>
</li>
<li>
<a href="#nogo">8</a>
<ul class="navUl">
<li><a href="#nogo">88</a></li>
<li><a href="#nogo" class="curButA">88</a></li>
<li><a href="#nogo">88</a></li>
<li><a href="#nogo">88</a></li>
</ul>
</li>
<li>
<a href="#nogo">9</a>
<ul class="navUl">
<li><a href="#nogo">99</a></li>
<li><a href="#nogo" class="curButA">99</a></li>
<li><a href="#nogo">99</a></li>
<li><a href="#nogo">99</a></li>
</ul>
</li>
</ul>
</div>
css:
.webSchoolL{ width:200px; height:460px; background:#ececec;}
ul.leftTab{ display:block; width:185px; border:1px solid #d0d0d0; margin:8px 0 0 7px; float:left; display:inline; background:#fff;}
ul.leftTab li{ width:179px; text-align:left; margin:5px 3px; float:left; display:inline;}
ul.leftTab li a{height:28px; width:179px; display:block; background:url(../images/meaulibg.png) no-repeat;line-height:28px;text-indent:47px; font-size:14px; font-weight:bold; color:#000;}
ul.leftTab li a:hover,ul.leftTab .curButA{background:url(../images/meaulicur.png) no-repeat; color:#fff; font-weight:bold; text-decoration:none;}
ul.leftTab .listL01{ height:32px; width:187px; background:url(../images/listL01.gif) no-repeat; margin:0 auto 3px auto; font-size:14px; font-weight:bold; color:#ffffff; text-indent:32px; margin:0px 0 0 -1px;line-height:32px;}
ul.leftTab li ul.navUl { display:none;border-left:1px solid #3fb4e8;border-right:1px solid #3fb4e8;border-bottom:1px solid #3fb4e8;}
ul.leftTab li ul.navUl li { float:none;margin:0px;}
ul.leftTab li ul.navUl li a { _width:177px;background:none; font-size:12px; font-weight:normal; color:#333;}
ul.leftTab li ul.navUl li a.curButA, ul.leftTab li ul.navUl li a:hover { background:url(../images/meaunavcur.png) no-repeat 18px 0px;color:#000;font-weight:normal;}
js:$(function(){//导航特效
$("#leftMeau li:has(ul) a").click(function(){
$(this).addClass("curButA");
$(this).siblings().slideDown();
$(this).parent().siblings().find("a").removeClass("curButA");
$(this).parent().siblings().find("ul").slideUp();
});
})

Answer 3

<li><div onmousemove ="$('#aboutapsn').show();" onmouseout ="$('#aboutapsn').hide();"><a href="about.aspx"  id="about">关于11</a>
                        <span id="aboutapsn" style="display:none">
                        <a href="about.aspx">集团简介</a>
                        <a href="about_3.aspx">荣誉资质</a>
                        <a href="#">企业文化</a>
                        <a href="box.aspx">总裁专栏</a>
                        <a href="">精英团队</a>
                        <a href="about_2.aspx">合作伙伴</a>
                        <a href="about_4.aspx">联系我们</a>
                        </span>
                        </div></li>

Answer 4

http://www.open-lib.com/Type/120-1.jspjquery menu插件