H5实例2-级联菜单

级联菜单

级联菜单可以很灵活地在页面上分级显示不同类别的项目，当用户将鼠标悬停在菜单项上，菜单项下会显示子菜单项目。 第1步：创建基本的导航菜单结构

在网页主体里面，用一个div来占位，这个div就是所有导航菜单的容器，为它取个名字ID=\。在该Div容器里面，用无序列表ul和li来组合出一级导航的菜单。

在网页里面，就是这个样子：

接下来，在一级导航下加入二级导航，我们还是用无序列表ul和li来组合：

注意：原来一级导航1 后面的要放在最后！ 这个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。

该实例源代码请百度“华夏电商”，进入本专业博客查找下载。

本文来源：https://www.bwwdw.com/article/7jw5.html