弹出式菜单的制做与应用  P270

作业5中，大家用“层的相对定位”和“显示-隐藏层”技术制作相对网页居中的下拉菜单，一定费了不少功夫吧。有位爱钻研的帅哥提出，如果网页中是有内容的，下拉菜单和网页中的具体内容之间有空行，不好看。怎么解决呢？

是否可以将下拉菜单放到一个层里，网页具体内容放到另一个层里，然后调整两个层的“top”属性和“z”轴顺序呢？同学们不妨试一试。

现在，老师要告诉大家一个好消息，书上的“弹出式菜单”能完美地解决这个问题！

请大家跟书操作“12.3.9  显示弹出式菜单”（P270），通过自己的实验，掌握弹出式菜单的完美制作方法。包括但不限于：

1.      主菜单在网页中是居中的；

2.      子菜单紧随在主菜单的下方，大小、位置都完美对应；

3.      鼠标悬停在主菜单上，出现子菜单；

4.      鼠标离开主菜单，隐藏子菜单；

5.      主菜单的部分模块有子菜单，部分模块无子菜单；

6.      所有主菜单、子菜单里的链接可用；

7.      主菜单与下方的网页内容间距合适；

效果图大致如下：

我思故我在，我学故我会。希望同学们都能靠自己的学习在考试中做出来！

附：弹出式菜单效果视频