CSS3动画下拉菜单（当transition遇到display的坑）

下拉菜单是页面中很常见的一个元素，但是<select>和<option>标签的默认外观实在不怎么好看，而且它们还很难通过CSS来修改成合意的样式，对hover效果的支持也不好，因此往往会使用<div>或是<ul>、<li>这些标签来模拟出下拉菜单的效果。

实际上，使用CSS3的话，实现下拉菜单的效果是相对简单的。HTML结构如下：

<div id="select">
<span style="white-space:pre">	</span>下拉菜单效果
	<ul>
		<li>option one</li>
		<li><a href="http://www.baidu.com">option two</a></li>
		<li>option three</li>
	</ul>
</div>

相应的CSS代码如下：

#select{
	margin: 10px auto 180px auto;
	width: 200px;
	height: 50px;
	background-color: #eee; 
	border-radius: 5px;
	line-height: 50px;
	text-align: center;
	cursor: pointer;
}
ul li{
	visibility: hidden;
	opacity:0;
	width: 180px;
	height: 0px;
	list-style-type: none;
	text-align: center;
	background-color: #eee;
	line-height: 00px;
	margin: 0 auto;
}
#select:hover ul li{
	visibility: visible; 
	opacity: 1;
	height:50px;
	line-height:50px;
	transition: all 1s;
}

以上代码还实现了一种菜单逐渐向下推开的效果，关键就是对<li>的height属性也设置一个渐变的动画。

其实在此之前，我还尝试了两种方案。

第一种是只设置opacity:0 隐藏下拉菜单，这种方案的动态效果符合理想，但是有一个很大的缺陷，那就是下拉菜单只是看不见了，但仍然占位，这意味着cursor:pointer的范围会包括了下方本应空白的地方，而且鼠标移动到上面也会触发菜单弹出，菜单上的链接或是click也一样能够触发。这是一个不明显但不能容忍的bug。

于是我想到用display:block 隐藏菜单，因为这样菜单是不占位的，点击事件和链接也不会触发。这的确修复了这个问题，但新的问题又出现了，动态效果消失了，和单纯的hover时改变display值的效果一样，生硬地出现。也就是说，transition是不支持display属性的。

因此，最终采用的方案是通过改变visibility属性来显示/隐藏菜单，再通过opacity属性的改变达到渐变的动画效果。