jQuery-导航下拉菜单-实用简单

 /*CSS代碼*/
 /*導航*/
 .nav{background: url("../img/menu_bar.gif") repeat-x;}
 .nav ul li{display: inline-block; height: 40px; line-height: 40px; margin-left: 20px;}
 .nav ul li a{font-size: 15pt; font-weight: bold; text-decoration: none; color:#fff; letter-spacing: 5px; display: block; padding:0 18px;}
 .nav ul li a:hover{background:url("../img/submenu_bg.gif") repeat;}
 /*二級導航*/
 .nav .nav_2 {display: none; position: absolute;  margin: 0; padding:0; background:url("../img/submenu_bg.gif") repeat;}
 .nav .curreves{display: block;}
 .nav .nav_2 li{margin-left: 0; white-space: nowrap; display: block; width: 136px;}
 .nav .nav_2 li a{font-size: 12pt;}
 .nav .nav_2 li a:hover{color:#ffff00;}

 /*jQuery 代碼*/
 $(document).ready(function(){
     $(".nav>ul>li").hover(function(){
         /* find()搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。*/
         /* slideDown() 下拉屬性 .prev()相鄰元素 .css樣式*/
         /* slideUp() 上拉屬性 */
         $(this).find("ul").slideDown().prev("a").css({background:"url(img/submenu_bg.gif)"});
     },function(){
         $(this).find("ul").slideUp().prev("a").css({background:"none"})
     })
 })

 /*HTML代碼*/

 <div class="nav">
     <ul>
         <li><a href="#">首頁</a>
             <ul class="nav_2">
                 <li><a href="#">媒體專訪</a></li>
                 <li><a href="#">市場焦點</a></li>
             </ul>
         </li>
         <li><a href="#">物業搜尋</a>
             <ul class="nav_2">
                 <li><a href="#">地圖搵樓</a></li>
                 <li><a href="#">二手物業</a></li>
                 <li><a href="#">一手物業</a></li>
             </ul>
         </li>
         <li><a href="#">關於我們</a>
             <ul class="nav_2">
                 <li><a href="#">銷售精英</a></li>
                 <li><a href="#">年度冠軍</a></li>
                 <li><a href="#">行內點滴</a></li>
                 <li><a href="#">尊貴客戶</a></li>
             </ul>
         </li>
         <li><a href="#">成交記錄</a>
             <ul class="nav_2">
                 <li><a href="#">填土廳登記</a></li>
                 <li><a href="#">價格走勢</a></li>
             </ul>
         </li>

         <li><a href="#">物業按揭</a>
             <ul class="nav_2">
                 <li><a href="#">按揭計算</a></li>
                 <li><a href="#">銀行估價</a></li>
                 <li><a href="#">銀行利率</a></li>
             </ul>
         </li>
         <li><a href="#">歡迎查詢</a>
             <ul class="nav_2">
                 <li><a href="#">聯絡我們</a></li>
                 <li><a href="#">加入我們</a></li>
             </ul>
         </li>
     </ul>
 </div>