展開式選單 第一頁

此練習試作一個可展開與隱藏的選單。此練習只用到 CSS，你也可以用 javascript 作 展開式選單，其顯示效果不同，可以依需要選用最適合的方法。此練習使用的元素與特徵有：

1. DIV：容納文字與元素的容器。
2. UL：建立一個沒有編號的清單。
3. height：設定元素矩格的高度。初值設為 30px。
4. overflow:auto：內容超出元素矩格範圍時的風格表。
5. :hover：滑鼠游標在元素上移動時的風格表。

<style type='text/css'> .first {height:30px; overflow:hidden; width:200px; border:solid 1px red; } .first:hover {height:auto} </style> 請點選下列項目： <DIV class=first>動作遊戲 <ul> <li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3953.html'>長劍客戰骷髏</a> <li><a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a> </ul> </div> <div class=first>競速遊戲 <ul> <li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a> <li><a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a> </ul> </div>

• 上例，IE6 失敗，IE6 不支援一般元素用 :hover；Firefox, Safari, Chrome 都成功。

使用 white-space 製作一個展開式選單。前面的練習用改變高度的方法，製作展開式選單。下面的練習改用 white-space:nowrap 與 white-space:pre 製作展開式選單。兩者的顯示效果有差異。 <style type='text/css'> .pre {height:auto; overflow:hidden; width:140px; border:solid 1px red; white-space:nowrap; } .pre:hover {white-space:pre} </style> 請點選下列項目： <DIV class=pre>動作遊戲 <a href='http://gamelily.blogspot.com/2008/11/blog-post_3953.html'>長劍客戰骷髏</a> <a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a> </div> <div class=pre>競速遊戲 <a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a> <a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a> </div>

• 上例，IE6 失敗；Firefox, Safari, Chrome 都成功。

展開式選單（你正在看 第一頁）

:

第一頁

第二頁