有用jQuery的专业点的导航菜单吗？

网上搜了搜，发现用jQuery做的菜单，漂亮的，专业点的没有几个。是我看的太少了吗，谁有不错的例子，发个链接出来吧。ps，我发现http://www.ibm.com/us/en/的菜单很不错，虽然不是jQuery的。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

有阿，下载这个
http://download.csdn.net/source/2183451
解压缩后，看 menubutton.html 这个例子，非常专业。
楼主网上很多，http://www.iwanna.cn/archives/2009/05/30/1218/
触发mouseout事件隐藏菜单会占用大量浏览器资源，不推荐有空的话研究研究Windows的菜单的展示方式
CSS菜单,取自OPERA:
我作了注释,供参考.能不用JS就不用.<meta http-equiv="content-type" content="text/html; charset=utf-8">
  <style type='text/css'>
/*代码重点:据实践总结:CSS不像JS,其它这些菜单是早就存在的,只是在开始把它放到别的地方:margin:0 0 0 -999em;
然后再鼠标移到上面的,设置margin-left:0px;,同理,如果是竖的菜单一样的.主菜单是用relative,它的子菜单,才
能相对主菜单定位,子菜单用absolute,绝对定位.所以主菜单的高和子菜单的top:值就是这个高度.
否则子菜单在鼠标放上去,会消失.*/
/* top menu */
#nav ul#mainmenu {list-style:none inside none;padding:0 130px 0 26px;margin:0 0 16px -14px;
/*background: url('/bitmaps/mainmenu/all.png') no-repeat 100% 0;*/
height:70px;min-height:70px;height:auto !important;z-index:998;position:relative;/*位置相对,子元素可以相对它.*//**/border:1px solid #990;}
#nav ul#mainmenu li a {max-height:45px;border:0px solid #990;}/*定义菜单横条高度.*/ /*#nav ul#mainmenu {margin:0 0 0 -14px;
/*background: url('/bitmaps/mainmenu/all-tobg.png') no-repeat 100% 0;*
height:65px;min-height:65px;height:auto !important;}*/ /*定义所有的nav下的li,position:relative;这样会让其子元素相对它位移.
如果li设置了margin,没有这个,那它的子元素可能会偏,float:left;会把所有li排成排*/
#nav li {color:#fff;
background:#900/* url('/bitmaps/mainmenu/all.png') -60px -20px*/;
position:relative;margin-top:20px;float:left;list-style-image: none;/**/border:0px solid #990}
#nav li a {display:block;line-height:45px;padding:0 15px;color:#fff;text-decoration:none;white-space:nowrap;}
/*
#nav li a:hover, #nav li.on ul a:hover, #nav li.on a, #nav li a:focus, #nav li a.sffocus, #products #nav .menu-products, #news #nav .menu-news, #discover #nav .menu-discover, #addons #nav .menu-addons, #developer #nav .menu-developer, #support #nav .menu-support, #about #nav .menu-about, #jobs #nav .menu-jobs, #business #nav .menu-business {background:transparent url('/bitmaps/mainmenu/menu_over2.png');text-shadow: #000 0px 1px 2px;}
*/ /* Top menu dropdowns 下面这个top那能合li里的子菜单ul放到鼠标位置下面.
margin:0 0 0 -999em;如果不设置这个值,下级菜单会显示出来,而不是在鼠标划过时显示*/
#nav li ul {
position:absolute;z-index:999;min-width:150px;background:#222;color:#fff;opacity:0.98;
top:45px;/*高度要和上面的菜单一样.因为它是在li内部,而a应该是不算box,所以是相对这个li外边界值.*/
list-style:none;border-top:1px solid #555;margin:0 0 0 -999em;padding:0;background-image:none;
}
/*设置li:hover时出现子菜单ul.*/
#nav li:hover ul/*, #nav li.sfhover ul*/ {margin-left:0;}
#nav li ul li {/*这个float:none;不设置,因为子菜单的li设定了宽度,所以hover时宽度不会覆盖整个li*/
float:none;margin:0;padding:0;white-space:pre;border-bottom:1px solid #555;background-image:none;background:transparent;height:2.3em;}
#nav li ul a, #nav li.on ul a {
height:auto;color:#fff;border:0px;line-height:2.3em;display:block;background-image: none;float:none;width:80%;
}
#nav li ul li:hover, #nav li ul a:hover, #nav li ul a:focus, #nav li ul a.sffocus {color:#fff;background-color:#900;}
  </style>
</head>
<body id="company">
    <div id="nav">
      <ul id="mainmenu">
        <li><a href='#'>Home</a></li>
        <li class="on"><a href='#'>Products</a>
          <ul class="hide-mobile">
            <li><a href='#'>Opera browser</a></li>
            <li><a href='#'>Opera Mini</a></li>
            <li><a href='#'>Opera Link</a></li>
            <li><a href='#'>Opera Mobile</a></li>
            <li><a href='#'>Opera Devices</a></li>
            <li><a href='#'>Opera Mail</a></li>
            <li><a href='#'>Opera Dragonfly</a></li>
            <li><a href='#'>Opera Unite</a></li>
          </ul>
        </li>
        <li><a href='#'>Developer</a></li>
        <li><a href='#'>Support</a>
          <ul class="hide-mobile">
            <li><a href='#'>Get started</a></li>
            <li><a href='#'>Register Opera Mobile</a></li>
            <li><a href='#'>Knowledge base</a></li>
            <li><a href='#'>Online communities</a></li>
            <li><a href='#'>Reporting bugs</a></li>
            <li><a href='#'>Access Opera</a></li>
            <li><a href='#'>Premium support</a></li>
            <li><a href='#'>Documentation</a></li>
          </ul>
        </li>
        <li><a href='#'>Press</a>
          <ul class="hide-mobile">
            <li><a href='#'>Press releases</a></li>
            <li><a href='#'>Press resources</a></li>
            <li><a href='#'>Fast facts</a></li>
            <li><a href='#'>Opera in the news</a></li>
            <li><a href='#'>Reviewer's guide</a></li>
            <li><a href='#'>FAQ</a></li>
            <li><a href='#'>Press contacts</a></li>
          </ul>
        </li>
        <li><a href='#'>Company</a>
          <ul class="hide-mobile">
            <li><a href='#'>About Opera</a></li>
            <li><a href='#'>Investors</a></li>
            <li><a href='#'>State of the Mobile Web</a></li>
            <li><a href='#'>Opera on tour</a></li>
            <li><a href='#'>Job opportunities</a></li>
            <li><a href='#'>Vision</a></li>
            <li><a href='#'>Education</a></li>
            <li><a href='#'>Executive team</a></li>
            <li><a href='#'>History</a></li>
            <li><a href='#'>Contact</a></li>
          </ul>
        </li>
        <li><a href='#'>Business</a>
          <ul class="hide-mobile">
            <li><a href='#'>Overview</a></li>
            <li><a href='#'>Opera Advantage</a></li>
            <li><a href='#'>Solutions</a></li>
            <li><a href='#'>Customers</a></li>
            <li><a href='#'>Partners</a></li>
            <li><a href='#'>Gallery</a></li>
            <li><a href='#'>Awards</a></li>
            <li><a href='#'>Newsletter</a></li>
            <li><a href='#'>Contact us</a></li>
          </ul>
        </li>
      </ul>
    </div>
</body>
跟踪推荐看看微软的菜单http://www.microsoft.com/en/us/default.aspx