1 /*CSS代碼*/
2 /*導航*/
3 .nav{background: url("../img/menu_bar.gif") repeat-x;}
4 .nav ul li{display: inline-block; height: 40px; line-height: 40px; margin-left: 20px;}
5 .nav ul li a{font-size: 15pt; font-weight: bold; text-decoration: none; color:#fff; letter-spacing: 5px; display: block; padding:0 18px;}
6 .nav ul li a:hover{background:url("../img/submenu_bg.gif") repeat;}
7 /*二級導航*/
8 .nav .nav_2 {display: none; position: absolute; margin: 0; padding:0; background:url("../img/submenu_bg.gif") repeat;}
9 .nav .curreves{display: block;}
10 .nav .nav_2 li{margin-left: 0; white-space: nowrap; display: block; width: 136px;}
11 .nav .nav_2 li a{font-size: 12pt;}
12 .nav .nav_2 li a:hover{color:#ffff00;}
13
14 /*jQuery 代碼*/
15 $(document).ready(function(){
16 $(".nav>ul>li").hover(function(){
17 /* find()搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。*/
18 /* slideDown() 下拉屬性 .prev()相鄰元素 .css樣式*/
19 /* slideUp() 上拉屬性 */
20 $(this).find("ul").slideDown().prev("a").css({background:"url(img/submenu_bg.gif)"});
21 },function(){
22 $(this).find("ul").slideUp().prev("a").css({background:"none"})
23 })
24 })
25
26 /*HTML代碼*/
27
28 <div class="nav">
29 <ul>
30 <li><a href="#">首頁</a>
31 <ul class="nav_2">
32 <li><a href="#">媒體專訪</a></li>
33 <li><a href="#">市場焦點</a></li>
34 </ul>
35 </li>
36 <li><a href="#">物業搜尋</a>
37 <ul class="nav_2">
38 <li><a href="#">地圖搵樓</a></li>
39 <li><a href="#">二手物業</a></li>
40 <li><a href="#">一手物業</a></li>
41 </ul>
42 </li>
43 <li><a href="#">關於我們</a>
44 <ul class="nav_2">
45 <li><a href="#">銷售精英</a></li>
46 <li><a href="#">年度冠軍</a></li>
47 <li><a href="#">行內點滴</a></li>
48 <li><a href="#">尊貴客戶</a></li>
49 </ul>
50 </li>
51 <li><a href="#">成交記錄</a>
52 <ul class="nav_2">
53 <li><a href="#">填土廳登記</a></li>
54 <li><a href="#">價格走勢</a></li>
55 </ul>
56 </li>
57
58 <li><a href="#">物業按揭</a>
59 <ul class="nav_2">
60 <li><a href="#">按揭計算</a></li>
61 <li><a href="#">銀行估價</a></li>
62 <li><a href="#">銀行利率</a></li>
63 </ul>
64 </li>
65 <li><a href="#">歡迎查詢</a>
66 <ul class="nav_2">
67 <li><a href="#">聯絡我們</a></li>
68 <li><a href="#">加入我們</a></li>
69 </ul>
70 </li>
71 </ul>
72 </div>
