网页设计与制作 课件 14 制作多级导航菜单.pptxVIP

;复习巩固;当网站的内容增多，为了更清晰的导航，通常会在一级导航链接下再设置子菜单。

本任务结合嵌套列表、定位等相关知识，制作二级导航菜单。

二级导航超链接默认情况下隐藏，父元素处于hover状态时显示；

二级导航超链接高度为50px，背景颜色为#fff，文字大小为14px,颜色为#000，有底边框线;

二级导航超链接hover状态：字体颜色为#99d022，背景颜色为白色（#fff);;学习内容;;;父一级li设置position:relative作为定位参照；

内部二级ul设置absolute脱离文档流；

通过left、top调整弹出位置。;子菜单的显示与隐藏：默认情况下隐藏，鼠标悬浮于父菜单时显示其二级子菜单。

显示与隐藏

display:none：完全隐藏，不占用页面空间；

display:block：恢复块级显示。

hover交互

li:hover选中悬浮状态，修改内部二级菜单display值，实现弹出收起效果。 ;使用列表实现一级导航菜单结构

实现一级菜单样式

;使用列表嵌套实现二级菜单结构

;子菜单的定位

父元素（一级li）为相对定位

子元素（二级ul）设为绝对定位，设偏移量

;实现导航条固定定位

;出门测

小结

二级菜单的显示或隐藏

默认情况下不显示，设置display:none;

父元素（li）处于hover状态时，相应的子菜