此練習試作一個可展開與隱藏的選單。此練習只用到 CSS，你也可以用 javascript 作 展開式選單，其顯示效果不同，可以依需要選用最適合的方法。此練習使用的元素與特徵有：
- DIV：容納文字與元素的容器。
- UL：建立一個沒有編號的清單。
- height：設定元素矩格的高度。初值設為 30px。
- overflow:auto：內容超出元素矩格範圍時的風格表。
- :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 都成功。
| 展開式選單（你正在看 第一頁） | : | 第一頁 | 第二頁 |
