相信初學HTM DIV CSSl的同學們一定也想做出淘寶網首頁的菜單動畫吧。今天我們就帶大家體會一下級聯選單的顯示。小編我只是實現了簡單地效果，不過整體來說原理是一樣的哦，那麼先讓大家看看效果圖吧。
那麼要實現這個效果我們當然要使用到的是jQuery,那麼我就開始講解怎麼做的了，先上html和css的程式碼
menu.css
@CHARSET "UTF-8";
*{
邊距：0px;
內邊距：0px;
}
ul,li{
列表樣式類型：無;
}
.menu{
寬度：190px;
邊框：1px 紅色實心；
；背景顏色：#fffdd2;
}
.optn{
寬度：190px;
行高：28px;
邊框頂部：1px紅色虛線；
}
.content{
padding-top:10px;
清除：左；
}
a{
文字裝飾：無；
顏色：#666；
內邊距：10px；
}
.optnFocus{
背景顏色：#fff;
字體粗細：粗體；
}
div{
內邊距：10px;
}
.tip{
寬度：190px;
邊框：2px 紅色實心；
位置：絕對;
背景顏色：#fff;
顯示：無;
}
.tip li{
行高：23px;
}
接下來是主要的jquery 程式碼：menu.js
複製程式碼
碼>
$(function(){
var curY;//取得選定想要的TOP
var curH;//取得選取想要的高度
var curW;//取得選定的寬度
var objL;//取得目前物件
//自訂函數用於取得目前位置
function setInitValue(obj){
curY= obj.offset().top;
curH=obj.height();
curW=obj.width();
//設定目前所選滑動事件
$(" .optn").mouseover(function(){
objL=$(this);//取得目前物件
setInitValue(objL);
var allY=curY- curH "px";
objL.addClass("optnFocus");
//取得氣元素下一個ul
$(".tip",this).show(). css({"top":allY," left":curW});;
$(".optn").mouseout(function(){
$(this).removeClass("optnFocus")
$(".tip ",this).hide();
});
//為了防止移到子選單時子選單不見了，我們也要為子選單設定滑鼠事件
$(".tip").mouseover(function(){
$(this).show() ;
objL=$(this).prev("li")
setInitValue(objL);
objL.addClass("optnFocus");
$(".tip").mouseout(function(){
$(this).hide();
$(this).prev("li").removeClass("optnFocus");
})
});
注意事項：
1.由於我們使用的是先前版本的jquery檔案庫，所以有些方法是不支援的，例如取得下一個元素的第一個子元素next(erp)，在10.1中是不支援的，所以我換了一個方法$(chiled,select),表示在select的範圍進行元素的選擇
2.整個效果的實現我們還要為子選項框綁定滑鼠事件，目的就是為了不在我們移動到子選項卡中，突然消失。
要達到好看的效果就需要加一些圖片和樣式，不過原理是一樣的的哦
