实现下拉列表的两种方式

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

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

1、纯CSS实现：

 先看看效果图：

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

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

 
  
   
   
  
 
 
   
这里是纯CSS实现的下拉列表
   
   
   

     
    
    
下拉列表1
	   
      
      
item1
item2
item3
	 
下拉列表2
	   
      
      
item1
item2
item3
item4
item5
	 
下拉列表3
   
   
   

 

.css {width:100%; height:30px; background-color:#ccccff; }
.css ul {list-style-type:none; font-weight:bold;}
.css ul li {float:left; border:0px black solid; position: relative;}
.css ul li a {text-decoration:none; height:20px; width:80px; background-color:#afafaf; color:white; text-align:center; float:left; padding:5px; margin-right:1px; }
.css ul li a:hover {background-color:#12aeef}
.css ul li ul {display:none; }
.css ul li:hover ul {display:block; position:absolute; top:30px; left:-40px; width:120px; z-index:5;}
.css ul li:hover li a {background:#12aeef; color:#ffffff; width: 80px; text-align:center; margin:0px;}
.css ul li:hover li a:hover {background:#6dc7ec; color:#ffffff; }

2、用JavaScript来实现：

同样，还是先上图：

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

 
  
   
   
   rel="stylesheet" type="text/css" href="listStyle.css" >
  <script src="function.js" ></script>
  
 
 
   
这里是JS实现的下拉列表
   
   
   

     
    
    
下拉列表1
	   
      
      
item1
item2
	 
下拉列表2
	   
      
      
item1
item2
item3
	 
下拉列表3
	   
      
      
item1
item2
item3
item4
item5
	 
   
   
   
 

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

function mOver(i)
{
	Y = document.getElementById("aList"+i);
	Y.style.backgroundColor = "#12aeef";
	X = document.getElementById("list"+i);
	X.style.display = "block";
}

function mOut(i)
{
	Y = document.getElementById("aList"+i);
	Y.style.backgroundColor = "#afafaf";
	X = document.getElementById("list"+i);
	X.style.display = "none";
}

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