任务2-10　二级下拉菜单的制作

需求：

当鼠标移到某个一级菜单项之内时，自动显示它的二级下拉菜单；

当鼠标移到某个一级菜单项之外时，自动隐藏它的二级下拉菜单。

一级菜单可以水平排列，也可以垂直排列。

分析：

为了方便控制二级下拉菜单的显示或隐藏，以及显示位置，这里将二级下拉菜单置于一个DIV中，所有的DIV都使用绝对定位。

实现：

第一步，新建文件夹10，在10文件夹中新建一个HTML页面。

第二步，在页面中添加一个用于表示一级菜单的DIV，设置一级菜单DIV的相应样式属性及一级菜单标题文本，代码如清单2-28所示。

清单2-28　一级菜单的DIV

第三步，为使一级菜单具有弹出效果，添加其尺寸样式属性、溢出样式属性和移入移出事件处理代码。在一级菜单的DIV中添加二级下拉菜单的容器，并设置其位置样式属性，代码如清单2-29所示。

清单2-29　一级菜单的DIV与水平二级下拉菜单的DIV

第四步，在二级下拉菜单的容器中添加二级菜单列表，代码如清单2-30所示。

清单2-30　二级下拉菜单的容器与水平二级菜单列表

第五步，为了使一级菜单开始不显示二级菜单，应设置一级菜单的样式属性overflow为hidden。至此，一个二级菜单制作就完成了。

说明

制作水平排列的一级菜单及其对应二级菜单，因为二级菜单在一级菜单下方显示，所以，其容器的属性设置为left：64px和top：0px。

如果要制作一个，只需将二级菜单容器的位置属性修改一个即可。代码如下：

left：0px；top：16px；

绝对定位在定位方面容易理解与操作，但有时位置属性的设置比较复杂。

使用相对定位（相对于当前输出位置），制作菜单最为方便，其中二级菜单容器的top属性为-16px，表示实际位置的高度相对于当前位置上移16px，即与一级菜单标题文本顶端对齐。下面给出相对定位的二级菜单的代码清单2-31供读者参考。

清单2-31　相对定位的二级菜单