使用CSS实现下拉菜单的动态显示

代码编辑器：sublime text 3

浏览器：Firefox 40.0.1

下划线标注的解释原因由于对css的学习还不够深刻，所以属于个人主观理解。如果有错误希望大神们指出。谢谢!

1.下拉菜单的构成

这次我做的下拉菜单使用了<ul><li>元素，代码如下：


网页显示如下：



下拉菜单的制作中，在HTML代码方面，需要编辑的内容就完成了。下面我们对这些html代码进行CSS样式添加。

1）重置默认margin padding值。css会对未定义的元素给予默认的margin padding值，为了避免重复定义（？）首先在编写css时对全局的margin padding 进行重置。



2)然后对菜单进行总的相对于网页的定位，这里我把下拉菜单装进了一个div中，所以直接对div进行css样式编辑

设置宽度 高度 背景颜色 ，然后使用{margin: 0 auto:}实现水平居中；



效果如下：



此时对div的水平居中已经生效，但是由于<ul><li>标签属于块级元素，在标准文档流中独占一行显示，所以此时列表从div中溢出，并未在已经定义好的div中平行显示，所以下一步，对一级菜单的<ul>元素设置左浮动，并使用{list-style:none；}去掉无序列表前默认设置的点，并使文字居中显示，行高占满div。

同时，由于下一步需要对二级菜单进行相对于一级菜单的定位，这里使用了相对定位，方便下一步二级菜单定位的进行。

代码如下


效果如图：



一级菜单的水平显示实现。此时由于未设置<li>元素的间距，所以一级菜单各个链接之间间距为0，又由于在课程大厅与学习中心元素中包含有两个下拉菜单，所以撑开了间距。

下面我们一级菜单中的<a>标签设置css样式，使一级菜单的元素之间有间距，并去掉链接上的下划线。又由于在HTML中<a>标签不属于款及元素，所以在二级菜单中，两个链接水平显示，为了实现垂直显示，使用{display:block}将其强兴改变为块级元素，使他二级菜单中垂直显示。

为了有更好的可视化效果，我为<a>标签添加了hover样式，使鼠标在划过链接时有动态的背景颜色变化。

代码如下：


效果如下：



此时注意，由于二级菜单继承了一级菜单中的浮动属性，所以设置成块级元素的<a>标签仍然在水平显示。

下面进行二级菜单的定位和隐藏/显示的动态效果设置。

代码如下：


使用display:none;隐藏二级菜单，同时我们需要在鼠标滑过一级菜单时二级菜单显示出来。所以使用选择器 ul li:hover ul{display:block;}实现滑过一级菜单时二级菜单出现的动态效果。





现在虽然还未去掉二级菜单继承的float属性影响，但是在上一步代码中，一级菜单宽度产生变化，所以包含在其中的二级菜单进行了自动换行，但是为了使代码在多个浏览器中兼容（？），我们在下一步代码中还是对二级菜单进行了float属性的去除。

代码如下：



显示效果:







bingo,完成了。