這是一個完全用 CSS 完成的下拉式選單，沒有用到任何 Javascript。
這個範例目前在 Firefox 1.5.0.3、Internet Explorer 7.0.5358 以及 Opera 8.54 中測試成功，並且確定無法在 IE6 以下使用。而 Konqueror 與 Safari 則尚未測試。
先給範例網址吧：測試 CSS hover 效果。在發表評論、引用連結、加到網路書籤三個項目下，都有下拉選單。
雖然網路上有很多類似的範例，但對我來說，卻都因為功能太強大，導致用到大量複雜的 Javascript 或 CSS 設定。對於只需要很簡單的下拉選單的人來說，無異牛刀殺雞。
在尋尋覓覓過後，一直找不到適合的範例可以套用，索性就自己來寫一個。經過一番嘗試過後，總算是相容於 Windows 下的三大瀏覽器。但是目前市佔率最高的 IE6 不支援 CSS hover 與 PNG 的透明背景，因此完全無法使用。
可以預見這個寫法的概念在將來應該可以有很多應用，但現階段就祇能自己把玩把玩了……
這個下拉選單主要有幾個特色：
- 語法完全相容於 W3C 的規範標準。
- 利用 unordered list 與 float: left; 來達到橫向選單效果；再用 width: 125px; 來指定寬度，使下拉的選單可以縱向排列。
- 利用 padding: 16px; background: url('icon.png') left center no-repeat; 在每個選單項目前面加上小圖示。
- 彈出的關鍵在於利用 :hover 這個 pseudo class，在滑鼠移動到項目上的時候，將特定內容以 display: block; 顯示出來。而平時則用 display: none; 隱藏起來。
- 在彈出的項目上使用 position: absolute;屬性，使彈出的選單不會影響到其他區塊。
- 利用一張半透明的背景重複填滿整個區塊，使選單背後可以透出些許原本的內容。不過這個效果拿捏不好的話，可能會導致與背景過度混淆（範例中有），必須小心使用。
- 在彈出的選單上使用 border-right: 1px solid #xxx; border-bottom: 1px solid #xxx;，做出類似陰影的效果。
p.s. 範例中的文字是用亂數假文產生器產生的。
最近你的BLOG...有色彩許多了!!
評論由 紫月 發表 @ 五月 9 日, 2006 10:23 上午
8/8築站日誌...
1.FLV Player的外觀修改中，目前還是很醜，但我又不希望預設的黑色畫面甚至是影片review影響到版面配色，明天上班有時間偷懶的話，繼續跟flash戰鬥，依照我的規劃應該會改寫到原始碼的部份....
引用至 未完成的牽掛 @ 八月 8 日, 2006 11:46 下午
奇怪?我有引用這篇，可是為何沒出現=.=
可惡 每解決一個問題，另一個又冒出來，Wp的架構真是讓人又愛又恨耶，站長你的部落格實在豐富，幫了我好多忙^^謝謝
評論由 Joyce Wu 發表 @ 八月 8 日, 2006 11:49 下午
放心，這次不是你的問題XD
因為你的引用連結被 Spam Karma 2 給擋下來，必須要我審核過後才會顯示出來，現在應該有正確顯示了。
評論由 C.H.Weng 發表 @ 八月 9 日, 2006 7:54 下午
不好意思 又跑來問問題了>"
評論由 Joyce Wu 發表 @ 八月 9 日, 2006 11:11 下午
我來看看,學習學習
評論由 computer18 發表 @ 四月 3 日, 2007 9:49 下午
請問可不可以教如何,使用css控制有序列表,製作像檔案總管選單.
評論由 walen 發表 @ 八月 30 日, 2007 11:27 上午
我手邊有個範例，是滿漂亮的 Office 風選單。
不過不是我寫的，出處好像是某個 ptt 版友的 bookmark 列表…有點忘了，知道的人麻煩指正一下，有侵犯到誰的話也請跟我講
他的寫法我還沒仔細研究，不過你可以先參考看看：http://www.mediafire.com/?c1xd3w0eugz（MediaFile 免費空間）
評論由 C.H.Weng 發表 @ 八月 31 日, 2007 12:46 上午
極度感謝
在網路上搜尋的教學大部分都很複雜，這個真的很好用
︿︿
評論由 p 發表 @ 三月 27 日, 2008 9:54 下午
khhhjkhjkh
評論由 tu 發表 @ 十一月 25 日, 2011 8:38 上午