实现下拉列表的两种方式

下拉列表是网页中最为常见的结构之一，这里暂时采用两种方式：纯CSS的方法和JavaScript的方法来实现。

（PS：其实，除了下拉列表以外，还有很多在网页中使用频率较高的结构，可以自己编写好常用的代码段，以便在项目中使用提高效率。）

1、纯CSS实现：

 先看看效果图：

HTML的代码很简单，就不多说了。

这里用CSS实现注意伪类和display属性的使用就好：

2、用JavaScript来实现：

同样，还是先上图：

HTML和上面的差不多，同时引入外部js文件：

重要的是js文件怎么写。鼠标移动到列表项时，调用mOver( )和mOut( )方法改变当前下拉列表的display属性，实现列表下拉（当列表项有很多时，传递参数不太现实。所以其实可以用this关键字来实现，这里等以后有时间再改善吧）：

这个结构实现的方式其实有很多种，代码也可以继续完善，这里只是展示一下实现的思路。