二級下拉式菜單在各大學校站點。電商類站點。新聞類站點等大型？站點非經常見，那麼它的實作原理是什麼呢？
學習了Web前端開發的知識後，我們是能夠實作這種功能的。複雜的都是從基礎效果上加入做出來的。原理和流程
還是一樣的，今天開始做一些簡單的二級下拉式菜單。
橫向一級菜單我們見到的非常多。例如以下圖所看到的是：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
二級下拉菜單圖：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
二級下拉菜單是在橫向一級菜單的基礎上加入下拉效果實作的。制作思路：
第一步：靜态網頁的制作
标簽
- ...
項目清單
标簽連結
float浮動
display:block屬性
postion屬性規定元素的定位
第二步：動态特效的實作
下拉菜單的顯示與隐藏
今天我們使用CSS樣式表實作，那麼制作流程是：
1一級菜單設定：設定CSS樣式,使一級菜單橫向顯示,位于一行中。
2二級菜單設定：給”課程大廳”菜單,加入二級菜單(JavScript/JQuery/Ajax三項)，并帶連結；同一時候給“學習中心”菜
單，加入二級菜單(視訊學習/案例學習/交流平台三項)。也帶連結。
3隐藏二級菜單： 設定CSS樣式,讓二級菜單隐藏。
4顯示二級菜單：設定CSS樣式,讓二級菜單顯示。
5浏覽器相容性問題解決以及代碼優化，至少測試五個浏覽器。我測試的是IE7,8,9。2345浏覽器，谷歌浏覽器以
及火狐浏覽器。
HTML代碼部分：
下拉菜單
- 站點首頁
- 課程大廳
- JavaScript
- jQuery
- Ajax
- 學習中心
- 視訊學習
- 案例學習
- 交流平台
- 經典案例
- 關于我們
CSS樣式表style.css檔案代碼：
*{
margin:0;
padding:0;
}
.nav{
background-color:#EEEEEE;
height:40px;
width:450px;
margin:0 auto;
}
ul{
list-style:none;
}
ul li{
float:left;
line-height:40px;
text-align:center;
position:relative;
}
a{
text-decoration:none;
color:#000000;
display:block;
width:90px;
height:40px;
}
a:hover{
background-color:#666666;
color:#FFFFFF;
}
ul li ul li{
float:none;
background-color:#EEEEEE;
}
ul li ul{
position:absolute;
top:40px;
left:0px;
display:none;
width:90px;
}
ul li ul li a:link,ul li ul li a:visited{
background-color:#EEEEEE;
}
ul li ul li a:hover{
background-color:#009933;
}
ul li:hover ul{
display:block;
}
來看一下效果：
1初始化狀态或滑鼠離開顯示為橫向一級菜單：
2滑鼠滑過有二級下拉菜單的元素時顯示下拉菜單：
3顯示的下拉菜單中的連結樣式：