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>