多级下拉菜单导航制作

水平导航菜单的制作思路：

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%，意为挨着紧父菜单右侧）

两种思路：

• 所有li左浮，然后设置第一级li为relative，下拉ul为absolute，那么下拉菜单将会在上一级菜单正下方
• 只设置上一级li左浮，那么下拉菜单将会在上一级菜单正下方

垂直导航菜单的制作思路（子菜单在侧边显示）：

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以块元素显示出来

竖直导航菜单（子菜单也是竖直导航）

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位置为relative，显示方式为none

8、设置当划过第一级li时，二级ul以块元素显示出来