Css实现下拉菜单.docVIP

aa学院 软件开发专业 PAGE PAGE 1 Web前端开发实训案例三 Css下拉弹出菜单 要求 实现“纵向导航.gif”效果，鼠标移入各对应菜单项时，其内部子菜单显示，鼠标移开则隐藏。 案例背景 Css实现下拉弹出菜单并不是主流的开发形势，但该功能的实现涉及的知识点与技巧综合程度较大，实属css进阶学习的较好案例。 预备知识 列表元素的嵌套 内联元素与块元素的相互转化 元素盒模型 常用选择器（伪类选择器） 浮动和定位 实现过程 结构分析 效果图为不同级别的菜单列表，所以最直接的html结构就是列表的嵌套，有两个内嵌列表。菜单上并列下拉选项，下拉选项整体应该保持和单个菜单分开，由此得到下面的结构性文档。 布局思路分析 （1）由于要精确的控制三个列表的位置，先重置默认样式 （2）设置各个列表及列表项的样式，并让二级、三级菜单相对于一级菜单定位，按测量的偏移量进行设置。css代码如下 （3）设置二级、三级菜单隐藏，对列表项及其里面的链接进行设置，具体如下 （4）用伪类选择器设置子菜单的动态显示效果 （5）过程小结 应该先把所有的子菜单隐藏，然后再来实现动态显示效果，并不是隐藏一个接着显示一个。此外方案中应用的子元素选择器，这样可以避免选择到最内层的列表项li标签。 （6）扩展 把上面纵向导航的菜单效果修改为横向导航，并且让每个子菜单在对应的一级菜单列表项下面显示出来，特别需要注意相对定位元素的设定。 项目实训案例评分标准 按要求完成实训效果 从上面的过程总结web项目开发思路 本例中应用的具体css知识点总结