學完了上節教程，我想對於這於這節的學習就容易得多了。
橫向選單是透過div及JavaSprict實現下拉控制，縱向選單呢？答案是肯定的。我們現在要做的就是一個縱向選單，css程式碼：
ul { margin:0; padding:0; list-style:none; width:120px; border-bottom:1px solid #ccc; font-font- size:12px;}
ul li { position:relative;}
li ul { position:absolute; left:119px; top:0; display:none }
ullilia p; display:block; text-decoration:none; color:#666666; background:#fff; padding:5px; border:1px solid #ccc; border-bottom:0px;}
/*解決ul在IE下顯示不正確的問題*/
* html ul li { float:left; height:1%;}
* html ul li a {height :1%;}
/* end */
li:hover ul,li.over ul { display:block;}
css程式碼的編寫基本上保持了與橫向導航相同的思路，不同的是，為了實現導航中的了導航與主導航在實現滑鼠互動的同時，保持其相對位置一致，我們使用了對ul li{}使用了position:relative;使其定位方式轉為相對定位。而對li ul{}即子導航採用了position:absolute;相對於導航的絕對定位方式，了其滑鼠互動後的位置一致。
也許您已經發現，這裡在css程式碼未尾增加了一段註解的定義* html ul li 與* html ul li a。這裡用到的是CSS hack，這是因為不同的瀏覽器對程式碼的解析不同，用來實現在各瀏覽器上顯示相同的效果而使用的。這段程式碼只有IE瀏覽器能解析，其它瀏覽器視而不見。
本範例的最終顯示效果如下：
