如何用CSS語法自己做下拉式選單

有用Dreamweaver的人應該都知道，DW有內建選列單(插入>版面物件>spry選列單)，雖然說很方便，而且如果有碰過CSS的人，其實內建選列單裡的物件都可以自己修改。



我們用DW內建的選單列來看

紅色框起來的部分是CSS語法

CSS又多又複雜，看到這CSS頭都暈了...還有一串特別長的，恩...。


其實選單列可以自己用CSS語法新增出來，效果和DW內建的選單列功能是一樣的


第一步：就是將選單內的按鈕全部打出來(下圖可以參考)

大概就是像這個樣子

第二步：再來就是開始新增CSS了。
ul{}
ul li{}
/*第一層*/
ul ul {}
ul ul li{}
/*第二層*/
ul ul ul{}
ul ul ul li{}
/*第三層*/

第三步：開始設定按鈕的寬高、文字置中、按鈕要水平還是垂直(我是用水平的)、按鈕背景等等...

ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul li{
float: left;
line-height: 50px;
text-align: center;
height: 50px;
width: 120px;
background-color: #0FF;
}
/*第一層*/
ul ul {
width: 360px;
background-color: #FF0;
}
ul ul li{}
/*第二層*/
ul ul ul{
width: 120px;
}
ul ul ul li{}
/*第三層*/

目前的結果

到這裡其實已經完成60%了

第四步：第二層、第三層的按鈕隱藏，滑過時才會顯示出來。

運用

display:none(隱藏)和block(顯示)

hover當滑鼠滑過會發生事件

ul ul {

width: 360px;

background-color: #FF0;

display: none;

}

ul li:hover ul{

display: block;

}

/*滑過第一層時才會顯示第二、三層*/

ul li:hover ul ul{

display: none;

}

ul ul li:hover ul{

display: block;

}

/*滑鼠滑過第二層才會顯示第三層*/

完成圖

是不是不難呢?很簡單的就可以運用CSS新增下拉式選單，而且要新增幾層隨意，就先介紹到這裡囉，有什麼問題歡迎私信我，或者在下方留言。