由於網路上的下拉式選單(drop down menu)。
大部份都是要套javascript才能完成的
但我記的ＣＳＳ也可以做出此效果
因此找到一個簡單範例
網頁原始碼如下：
<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>
<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;}
#menu ul .item{display:none;}
這行定義為ul item的標籤平常是隱藏。
#menu ul:hover .item{display:block;}
#menu ul:hover .item{display:block;}
當滑鼠移過去後顯示出來。
#menu{position:absolute;}
#menu{position:absolute;}
設定為絕對位置才不會影響到其他欄位。
此範例可以在Camino 1.5.1 ， Firefox的2.0.0.9和Safari 3.0.3 運作。但是不能運用在ＩＥ６。
後來知道原因是因為
IE6 ul不支援滑鼠判斷。
