You are here: 首頁 CSS語法專區 CSS下拉式選單

飛朵啦學習手札

本網站建議使用Firefox2.0以上,或是使用Goole瀏覽器來瀏覽,並使用1024x768解析度來觀看.

CSS下拉式選單

E-mail 列印 PDF
  由於網路上的下拉式選單(drop down menu)。
 
  大部份都是要套javascript才能完成的 

  但我記的CSS也可以做出此效果 

  因此找到一個簡單範例

  原始網址CSS Drop Down Menu 

網頁原始碼如下:

 <style type="text/css">

#menu ul .item{display:none;}

#menu ul:hover .item{display:block;}

#menu{position:absolute;}

</style>

<div id="menu"> 

 <ul id="item1"> 

    <li class="top"><a href="#">menu item</a></li>

    <li class="item"><a href="#">menu i

tem 1</a></li> 

    <li class="item"><a href="#">menu item 2</a></li> 

    <li class="item"><a href="#">menu item 3</a></li>

 </ul></div>  

 

  #menu ul .item{display:none;}

 這行定義為ul item的標籤平常是隱藏。

  #menu ul:hover .item{display:block;}

當滑鼠移過去後顯示出來。

 #menu{position:absolute;}

設定為絕對位置才不會影響到其他欄位。 
 
 
此範例可以在Camino 1.5.1 , Firefox的2.0.0.9和Safari 3.0.3 運作。但是不能運用在IE6。
 
後來知道原因是因為
 
IE6 ul不支援滑鼠判斷
 
 
 
最近更新 ( 週五, 10 七月 2009 14:25 )  
 

新增回應


驗證碼
更新