雖然網上類似甚至相同的案例有很多，但是我還是寫下，以記下筆記，也可供大家參考
希望大家可以指導批評~~
首先我們以清單ul li 來開始我們菜單也可以說導覽列的制作：
在頁面中我們首先建構以下XHTML結構：
View Code
效果：
接着，我們來一步一步設計樣式及功能（先給每個元素加個邊框以便後續樣式設計差別）：
樣式代碼：
這樣我們就可以好區分，好設計了~~
下面去掉連結的下滑線和清單的“.”“。”，并且使父級的清單橫向排列，子級清單還是縱向排列，這樣才像下拉菜單嘛~~（這裡是兩級清單嵌套，一個父級一個子級）
下面來隐藏子級清單和子級容器（這裡子級容器是指id為test的div容器），當滑鼠移動到父級清單時相對應的子級清單顯現出來，通過“ :hover ”實作，隐藏顯現通過display的“ none ”和“ block ”來實作，注意這裡不用visibility的“ hidden ”和“ visible ”來實作，至于差別大家可以把相應的屬性換成visibility來看看效果，這裡就不實作了
這裡有一點需要注意，當不設定子級的position為“ absolute ”時，滑鼠移動到父級，出現的子級會在頁面占據一定的位置，那麼“ Page content here ”将會産生移動，這是十分不好的。是以我們設定子級“ position:absolute; ”，這樣便可以使它們脫離正常的流程，不影響後面的内容位置！
再将父級位置稍微偏移下和将第一個父級下的自己清單向左偏移與父級邊框對齊，并且給第二個父級下的div容器一定的“容積”
将所有邊框去掉後這裡最基本的結構就設計好了，其他的樣式可以随意調整啦~~
比如：
将所有邊框去掉後，并對整體進行下設計
圖一：
圖二：
OK！這就是在以上基本結構上設計的一個例子了。如果還需要設計，隻需要在以上最基本結構上設計就行了~~