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属性的改变达到渐变的动画效果。