在html页面中,我们会经常看到各类各样的下拉菜单,那么我们应该如何建造一个简单的下拉菜单呢,下面小渔就一一告诉大师。
方式/步调- 1
起首我们需要打开本身电脑上的DW软件,新建一个html页面,然后将其保留在桌面上。
- 2
接下来我们需要在body里面添加DIV标签,并在其内利用ul无序列表和li标签建造一个一级菜单栏,代码和浏览器的结果如下面两张图片所示。
- 3
因为菜单栏一般都是有链接的,我们就需要为每个li标签添加一个a标签,并增添恰当的样式。使得鼠标移到链接上面时有较着的颜色转变。
- 4
截止到上一步我们的一级菜单栏已经建造完成,接下来我们需要建造二级菜单栏。我们在有二级菜单栏的一级菜单栏的li标签下面添加ul再添加li标签就可以建造二级菜单了。
- 5
关于二级菜单的代码以及css样式,和在浏览器中的显示结果如下图所示。
- 6
大师可以看到,这是静态的二级菜单,二级菜单会一向在网页傍边显示,那么我们应该如何让其先埋没然后鼠标滑过一级菜单后再显示呢?
- 7
其实,这只需要我们为二级菜单的ul标签设置display的none和block两个属性就可以。默认环境下设置二级ul的display属性为none;鼠标滑过时dispaly属性为block。
- 8
如许一个二级菜单就建造完成了,想让其他的一级菜单下面也有二级菜单显示,我们只需要复制响应的代码就可以了。
END
起首我们需要打开本身电脑上的DW软件,新建一个html页面,然后将其保留在桌面上。
接下来我们需要在body里面添加DIV标签,并在其内利用ul无序列表和li标签建造一个一级菜单栏,代码和浏览器的结果如下面两张图片所示。
因为菜单栏一般都是有链接的,我们就需要为每个li标签添加一个a标签,并增添恰当的样式。使得鼠标移到链接上面时有较着的颜色转变。
截止到上一步我们的一级菜单栏已经建造完成,接下来我们需要建造二级菜单栏。我们在有二级菜单栏的一级菜单栏的li标签下面添加ul再添加li标签就可以建造二级菜单了。
关于二级菜单的代码以及css样式,和在浏览器中的显示结果如下图所示。
大师可以看到,这是静态的二级菜单,二级菜单会一向在网页傍边显示,那么我们应该如何让其先埋没然后鼠标滑过一级菜单后再显示呢?
其实,这只需要我们为二级菜单的ul标签设置display的none和block两个属性就可以。默认环境下设置二级ul的display属性为none;鼠标滑过时dispaly属性为block。
如许一个二级菜单就建造完成了,想让其他的一级菜单下面也有二级菜单显示,我们只需要复制响应的代码就可以了。
END