H5实例2-级联菜单

级联菜单级联菜单可以很灵活地在页面上分级显示不同类别的项目，当用户将鼠标悬停在菜单项上，菜单项下会显示子菜单项目。第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。该实例源代码请百度“华夏电商”，进入本专业博客查找下载。