H5实例2-级联菜单.docx

级联菜单 级联菜单可以很灵活地在页面上分级显示不同类别的项目，当用户将鼠标悬停在菜单项上，菜单项下会显示子菜单项目。 第1步：创建基本的导航菜单结构 在网页主体body里面，用一个div来占位，这个div就是所有导航菜单的容器，为它取个名字ID=Nav_Menu。在该Div容器里面，用无序列表ul和li来组合出一级导航的菜单。 在网页里面，就是这个样子： 接下来，在一级导航下加入二级导航，我们还是用无序列表ul和li来组合： 注意：原来一级导航1 后面的/li要放在最后！ 这个li里面又有一个ul- li组合，作为二级菜单。 类似可以在所有一级导航下面添加二级导航菜单，用复制粘贴就可以了： 没有做样式设计的二级菜单在网页里面显示应该是这样的： 为了后面在样式表能灵活设置样式，为各级html占位标签取名如下： 主要是div容器取名Nav_Menu，主菜单的ul取名Main_Menu，主菜单下的li项取类名Menu_List，子菜单的ul取类名Drop_Menu，子菜单的li项取类名Drop_List。 网页部分到这里就可以了，主要的工作在样式表里面，我们在网页头部加上样式表链接。 第2步：样式表的设计 样式表取名为style.css，放在网站的css文件夹里，样式表里面的设计如下： 1、最外面的DIV容器的样式如下： 在网页body中居中，占50个字符宽度，字符默认大小。 2、#Nav_Menu下的所有ul的共性样式： 在名为Nav_Menu的div容器里的所有ul，内外都不留白，并且所有ul里面都不要项目符号，宽度占据父容器的100%。 3、#Nav_Menu容器里，一级菜单下的li项的样式： 这些设置好以后，应该能看见一级菜单效果如下： 4、二级菜单的整体，Ul项的样式： 默认是不显示出来的，display: none; 5、二级菜单下的li项的样式： 居中，字体大小为标准的90%，背景和字体颜色也重新设计。 6、鼠标经过一级菜单中的li项时的样式变化： 自己的背景和字体颜色变化，重点是当鼠标经过它时，二级菜单的ul项（Drop_Menu类）从不显示变为显示。 7、二级菜单的li项，当鼠标经过它时，背景颜色也变化： 最终的效果如下： 注意：不同层级的ul和li对应不同的样式类，理解样式的这种书写方式： 意思是：名字为#Nav_Menu的div下面的，对应类名为Menu_List的li项，当鼠标经过它上面时，对应类名为Drop_Menu的ul项会进行的样式变化是display由原来的none隐藏变为可见的list-item。 该实例源代码请百度“华夏电商”，进入本专业博客查找下载。