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