下拉菜單先直接來看效果是怎樣：

當鼠標移到選單之后，下方會展開并有其它說明內容，我這邊是把展開的部份加上圖片內容，讓它有其它不同的變化。因為這樣的動作就像人家廟會時會有舞獅從嘴里丟下賀聯一樣，所以我才取名為"賀聯式選單"。

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

檢視原始碼 HTML

XML/HTML Code復制內容到剪貼板

• 梅干桑

  自我介紹

• Photoshop

  上課囉!!

• Q?＆?A

  問題討論

• 男丁格爾

• 人材

  丁丁是人材

• 格言

  好話大家說

• WOWGame

使用 UL 及 LI 來做選單的項目，每一個 LI 中的 A 連結是我們主要的選單內容，而其 DIV 是更進階的描述內容，若不需要的話則可以不用加。因為我要讓每個選單都有不同的背景圖，所以還需要幫 A 連結都加一個獨立的 class。

然后，我有 7 個 LI 選單項目，因此我還請梅干幫忙準備了 7 張圖片(果然還是要專業(yè)的來)。接著就能開始動手寫 CSS 囉：

檢視原始碼 CSS

CSS Code復制內容到剪貼板

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 語法都是很基礎的，比較需要注意的是我們一開始 A 連結的 height 是 50px，所以超過的部份會因為 overflow 為 hidden 的關系而被隱藏起來；另外，當鼠標移到 A 連結后，再額外訂了一個 a:hover { } 來把它的 height 撐高，因此原本看不到的背景部份就會顯現出來了。

到這邊就整個都完成了，一開始瀏覽時就只有一排的選單

當鼠標移到選項后就會顯示完整的背景內容

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

彈起式頁簽選單一樣先直接來看效果是怎樣：

跟上一個例子不同的是在此次是鼠標移到選單后會往上升，就象是突然彈起來一樣。

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

檢視原始碼 HTML

XML/HTML Code復制內容到剪貼板

首頁購物車推薦商品訂單查詢

同樣是用 UL 及 LI 來做選單的項目，每一個 LI 中的 A 連結是我們主要的選單內容，且為了讓每個選單都有不同的選單圖片，所以還幫 A 連結都加一個獨立的 class。

接著開始動手寫 CSS 囉：

檢視原始碼 CSS

CSS Code復制內容到剪貼板

#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;/*?需要設定為圖片寬/2?*/

background-repeat:no-repeat;

}

#menuli?a:hover?{

margin-top:1px;/*?當鼠標移到選單上時...?*/

}

/*?幫每一個?A?連結都加入不同選單圖片?*/

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

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

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

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

這邊要注意的是 A 連結的 margin-top 是選單圖片高的一半 - 31px，所以超過的部份就不會顯示出來；另外，當鼠標移到 A 連結后，再額外訂了一個 a:hover { } 來減少它的 margin-top，因此原本看不到的背景部份就會顯現出來了。

到這邊就整個都完成了，一開始瀏覽時就只有一排的選單

當鼠標移到選項后就會彈起來囉~~

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。