下拉菜單先直接來(lái)看效果是怎樣：

當(dāng)鼠標(biāo)移到選單之后，下方會(huì)展開(kāi)并有其它說(shuō)明內(nèi)容，我這邊是把展開(kāi)的部份加上圖片內(nèi)容，讓它有其它不同的變化。因?yàn)檫@樣的動(dòng)作就像人家廟會(huì)時(shí)會(huì)有舞獅從嘴里丟下賀聯(lián)一樣，所以我才取名為"賀聯(lián)式選單"。

這樣的效果其實(shí)只需要 HTML 及 CSS 配合就能做出來(lái)了，我們先來(lái)看 HTML 的部份：

檢視原始碼 HTML

XML/HTML Code復(fù)制內(nèi)容到剪貼板

• 梅干桑

  自我介紹

• Photoshop

  上課囉!!

• Q?＆?A

  問(wèn)題討論

• 男丁格爾

• 人材

  丁丁是人材

• 格言

  好話大家說(shuō)

• WOWGame

使用 UL 及 LI 來(lái)做選單的項(xiàng)目，每一個(gè) LI 中的 A 連結(jié)是我們主要的選單內(nèi)容，而其 DIV 是更進(jìn)階的描述內(nèi)容，若不需要的話則可以不用加。因?yàn)槲乙屆總€(gè)選單都有不同的背景圖，所以還需要幫 A 連結(jié)都加一個(gè)獨(dú)立的 class。

然后，我有 7 個(gè) LI 選單項(xiàng)目，因此我還請(qǐng)梅干幫忙準(zhǔn)備了 7 張圖片(果然還是要專業(yè)的來(lái))。接著就能開(kāi)始動(dòng)手寫(xiě) CSS 囉：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板

ul?{

margin:?0;

padding:?0;

list-style:none;

}

ul?li?{

float:left;

}

ul?li?a?{

width:100px;

height:50px;

display:block;

line-height:50px;

overflow:hidden;

text-align:center;

text-decoration:none;

color:#fff;

}

ul?li?a:hover?{

height:150px;

}

ul?li?a?div?{

color:#fff;

line-height:16px;

font-weight:bold;

margin-top:73px;

padding-top:7px;

border-top:1pxdotted#fff;

}

.t1?{background:#08f2d6url(01.gif);?}

.t2?{background:#1209f1url(02.gif);?}

.t3?{background:#a202e2url(03.gif);?}

.t4?{background:#f4e603url(04.gif);?}

.t5?{background:#55df07url(05.gif);?}

.t6?{background:#02a8f3url(06.gif);?}

.t7?{background:#f6025eurl(07.gif);?}

這邊用到的 CSS 語(yǔ)法都是很基礎(chǔ)的，比較需要注意的是我們一開(kāi)始 A 連結(jié)的 height 是 50px，所以超過(guò)的部份會(huì)因?yàn)?overflow 為 hidden 的關(guān)系而被隱藏起來(lái)；另外，當(dāng)鼠標(biāo)移到 A 連結(jié)后，再額外訂了一個(gè) a:hover { } 來(lái)把它的 height 撐高，因此原本看不到的背景部份就會(huì)顯現(xiàn)出來(lái)了。

到這邊就整個(gè)都完成了，一開(kāi)始瀏覽時(shí)就只有一排的選單

當(dāng)鼠標(biāo)移到選項(xiàng)后就會(huì)顯示完整的背景內(nèi)容

且我們的選單一樣是有超連結(jié)的功能，是不是很有趣呢！如果要讓效果更優(yōu)的話，當(dāng)然還是需要 JavaScript 的配合才行唷！

彈起式頁(yè)簽選單一樣先直接來(lái)看效果是怎樣：

跟上一個(gè)例子不同的是在此次是鼠標(biāo)移到選單后會(huì)往上升，就象是突然彈起來(lái)一樣。

這樣的效果一樣只需要 HTML 及 CSS 就能做出來(lái)了，我們先來(lái)看 HTML 的部份：

檢視原始碼 HTML

XML/HTML Code復(fù)制內(nèi)容到剪貼板

首頁(yè)購(gòu)物車推薦商品訂單查詢

同樣是用 UL 及 LI 來(lái)做選單的項(xiàng)目，每一個(gè) LI 中的 A 連結(jié)是我們主要的選單內(nèi)容，且為了讓每個(gè)選單都有不同的選單圖片，所以還幫 A 連結(jié)都加一個(gè)獨(dú)立的 class。

接著開(kāi)始動(dòng)手寫(xiě) CSS 囉：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板

#menu{

margin:20px0?0;

padding:?0;

height:62px;/*?選單圖片的高?*/

list-style:none;

overflow:hidden;

width:432px;/*?98?*?4?+?5?*?8?*/

border-bottom:1pxsolid#ccc;

}

#menuli?{

float:left;

padding:?05px;

}

#menuli?a?{

display:block;

width:98px;/*?選單圖片的寬?*/

height:62px;/*?選單圖片的高?*/

line-height:62px;/*?ie?suck?*/

text-indent:?-9999px;

margin-top:31px;/*?需要設(shè)定為圖片寬/2?*/

background-repeat:no-repeat;

}

#menuli?a:hover?{

margin-top:1px;/*?當(dāng)鼠標(biāo)移到選單上時(shí)...?*/

}

/*?幫每一個(gè)?A?連結(jié)都加入不同選單圖片?*/

.home?{background:url(home.gif);}

.car?{background:url(car.gif);}

.good?{background:url(good.gif);}

.query?{background:url(query.gif);}

這邊要注意的是 A 連結(jié)的 margin-top 是選單圖片高的一半 - 31px，所以超過(guò)的部份就不會(huì)顯示出來(lái)；另外，當(dāng)鼠標(biāo)移到 A 連結(jié)后，再額外訂了一個(gè) a:hover { } 來(lái)減少它的 margin-top，因此原本看不到的背景部份就會(huì)顯現(xiàn)出來(lái)了。

到這邊就整個(gè)都完成了，一開(kāi)始瀏覽時(shí)就只有一排的選單

當(dāng)鼠標(biāo)移到選項(xiàng)后就會(huì)彈起來(lái)囉~~

總結(jié)

以上是生活随笔為你收集整理的html选择弹出列表实例,CSS3制作炫酷的下拉菜单及弹起式选单的实例分享的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。