此練習試作一個可展開與隱藏的選單。開始時只顯示第一層主選單，點選主選單項目，會展開第二層選單；再點選時，會隱藏子選單。你也可以用 CSS 作 展開式選單，其顯示效果不同，可以依需要選用最適合的方法。此練習使用的元素與方法有：
- UL：建立一個沒有編號的清單。
- getElementById()：利用 ID 讀取元素物件。
- getElementsByTagName()：利用標籤名讀取元素物件，結果存入陣列中。要注意這是 getElementsByTagName。
- style：設定風格表新值。
- display:none：隱藏元素內容。
測試時還發現一個問題。原本範例是寫成下面的方式，可是卻不能展開子選單。這顯示 『UL.pull UL {display:none}』這個規則，不能用 style.display 改變。
使用 white-space 製作一個展開式選單。此法利用 white-space 的兩個值，pre 與 nowrap 來隱藏或展開選單；與前面的效果有差異。可以放一些次要資料在其中，要點選才能看到。此法也有一個 CSS 版本 的，但是不能在 IE6 執行。
下拉式的選單。開始時只顯示第一層主選單，滑鼠移到選單項目上，會展開第二層選單；滑鼠移出，會隱藏子選單。此練習使用到 position 特徵。先用一個父矩格 DIV 包納所有選單，並將其設為 position:relative。第二層選單則設為 position:absolute，並且利用 top, left 調整其位置。
