求一个jquery导航菜单

哎！本人对jquery只是懂一点皮毛！简单的会写那么一点，可这样的效果，我又不知道怎么做了，问题一：描述：当鼠标放上去的时候，二级菜单全部显示出来，离开的时候，隐藏起来！问题二：
描述：鼠标放上去，黑条和字显示出来，离开的时候，隐藏起来！相信懂jquery的，对于这些应该不难吧！谢谢大侠啊！要用js写，实在写不出动画效果，所以请各位jquery高手帮帮忙啦！

解决方案 »

  1.   

    倒是觉得，CSS的东西多于jQuery~http://geovindu.blog.163.com/blog/static/9827808201001741821545/
      

  2.   

    这种东西，都是封装好的plusin~
      

  3.   

    mouseover控制显示/隐藏了 。
    应该还是不很难的 。
      

  4.   

    第一个：<html xmlns="http://www.w3.org/1999/xhtml">
        <head id="Head1" runat="server">
    <script type="text/javascript" src="Jquery.js"></script>
    <style type="text/css">
    .none{display:none;}
    .block{display:block;}
    #ll.a:hover {
    font-size: 12px;
    color: #ee3e6f;
    text-decoration: underline;}
    </style>
        <script type="text/javascript">
            $(function () {
                $("#bb").each(function () {
                    $(this).mouseover(function () {
                        $(".navli #ii").removeClass("none").addClass("block");
                        $(".navli #ii ul").removeClass("none").addClass("block");
                    });
                    $(this).mouseout(function () {
                        $(".navli #ii").removeClass("block").addClass("none");
                        $(".navli #ii ul").removeClass("block").addClass("none");
                    });
                });
            })
          function above(li) {
            li.style.backgroundColor = '#22CCFF';
          }
          function over(li) {
            li.style.backgroundColor = '#0079ae';
          }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
    <div class="navli"   id="bb" style=" float:left; text-align:center; position:relative; z-index:100" > 产品中心  <div id="ii" style="padding:0px 0px 0px 0px; float:left"  class="none"> <ul style="line-height:20px; background-color:#0079ae;font-family:微软雅黑; font-size:12px; z-index:11; position:absolute; margin:36px 0px 0px 5px; *margin:0px 0px 0px 5px;  width:70px" class="none">      
      <li onmouseover="above(this)" onmouseout="over(this)" >fdgfdgfd</li>
     <li onmouseover="above(this)" onmouseout="over(this)" >fdgfdgfd</li>
     <li onmouseover="above(this)" onmouseout="over(this)" >fdgfdgfd</li>
     <li onmouseover="above(this)" onmouseout="over(this)" >fdgfdgfd</li>
     <li onmouseover="above(this)" onmouseout="over(this)" >fdgfdgfd</li>
     </ul> </div></div>
        </form>
    </body>
    </html>第二个类似
      

  5.   

    http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
      

  6.   

    OH mygod,都不是我想要的！只要鼠标放上去，不是其中某个二级菜单显示，是所有的二级菜单全部显示，只要鼠标放在其中某个一级菜单上.....
      

  7.   

    那不是更好写了，你把所有的二级菜单用一个div包住，然后把它们各自的位置用css定位好，放置在各个父菜单对应的下面，然后这个div的display=none,在父菜单的鼠标划过事件中写display=bolck,这样就行了
      

  8.   

    $("div").mouserover(function(){ $("div ul").addClass("").children("li").show().edn().siblings().children("li").show(); });$("div").mouserout(function(){
    $("div ul").addClass("").children("li").end().siblings().children("li").show();
    })这个结构应该能够实现,LZ 可以将参数放里面进行试一下下!!!
      

  9.   

    $("div").mouserover(function(){ $("div ul").addClass("").children("li").show().edn().siblings().children("li").show(); });$("div").mouserout(function(){
    $("div ul").addClass("").children("li").hide().end().siblings().children("li").hide();
    })刚写错了
      

  10.   

    不好意思，没写出来，哪位jquery高手帮我写一下嘛！
      

  11.   

    现在我的代码是这样的！可以出现动画效果，可是，鼠标放上去，不停的显示，隐藏，显示，隐藏！请问怎么设置setTImeout
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>无标题页</title>
        <script src="js/jquery.js" type="text/javascript"></script>
    <link href="css/ysys.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript">
            $(function(){
                $(".yiji").mouseover(function(){
                 $(".erji").show("slow");
                   
                });
                $(".yiji").mouseout(function(){
                $(".erji").hide("slow");
                 
                });
            });
            
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
              <div style="height: 150px; background:black">
    <table style="margin-top:40px;  height: 100px; width: 1024px; vertical-align:top;"><tr><td style="width:140px; vertical-align:top;"></td>
    <td style="vertical-align:top; width:650px"> <div class="yiji">
        <ul>
            <li class="main"><a href="" class="xianshi">首页HOME</a></li>
            <li class="overview"><a href="" class="xianshi">简介OVERVIEW</a></li>
            <li class="resource"><a href="" class="xianshi">资源RESOURCES</a></li>
             <li class="case"><a href="" class="xianshi">案例CASE</a></li>
             <li class="customers"><a href="" class="xianshi">客户CUSTOMERS</a></li>
               <li class="contact"><a href="" class="xianshi">咨询CONTACT</a></li>
        </ul>
        
        <div class="erji">
       //内容，内容！！！！！ 这里，我设置了display：none,在样式erji里面  
         
        
         </div>
     </div>
       </td>
    <td  style="vertical-align:top;"></td>
    </tr></table>
     </div>
        </div>
        </form>
    </body>
    </html>这个意思就是和我发的帖子的意思差不多，当鼠标放上去的时候，（一级标题），二级标题全部显示！
    可现在的问题是：鼠标放上去，就不停的显示，隐藏，显示，隐藏，我知道，要设置setTimeOut,但我不知道怎么写！！！
      

  12.   

    http://download.csdn.net/source/3259392