多級下拉列表導航製作

水平導航選單的製作思路：

1、進行初始化的設定，將文件中所有元素的margin和padding設為0；

2、將所有的a元素設定為塊元素，去掉下劃線，新增背景色#c和padding值；

3、滑鼠移入li時改變子元素a的背景色，此處應為 li:hover>a (意思為滑鼠劃過li時，其直屬的子元素背景色改變#d，如果不加》,那麼所有二級選單極其子選單的背景色#c將變為#d)；

4、將導航選單整體的ul左浮，去掉列表項符號；

5、將li左浮，設定相對定位；

6、設定下拉容器隱藏，絕對定位，設定最小寬度；

7、滑鼠移入li時顯示當前li的子下拉容器此處語句為li:hover>ul（如果不加》,那麼當滑鼠劃過第一級子選單時，第二級第三集及以下的選單容器都會顯示出來，>強調父子元素的關係，一定是劃過父元素時，其子元素才會有所動作）

8、設定從二級選單起的ul位置，top 和left的設定（如果讓子選單剛好在父選單正下方，設定top為0，left為0，如果讓其子選單在父選單右側，那麼設定top為0，left為100%，意為挨著緊父選單右側）

兩種思路：

垂直導航選單的製作思路（子選單在側邊顯示）：

1、初始化設定

2、設定最外層ul的寬度和高度 margin值

3、設定所有ul的list型別為none

4、設定li的位置屬性為relative，背景色

5、設定所有的a為塊元素，對其文字格式進行設定，text-decoration、font-size、color、font-weight、text-align、line-height

6、設定滑動li時子元素a背景色的變換 li:hover>a

7、設定子級ul位置屬性為absolute，顯示方式為none，並設定其top為0，left為100%

8、設定當劃過第一級li時，二級ul以塊元素顯示出來

豎直導航選單（子選單也是豎直導航）