CSS菜單轉換

Question

的jsfiddle：http://jsfiddle.net/x6bM3/

如果你將鼠標懸停在產品鏈接，你會看到我創建了一個下拉作用，但什麼即時試圖做的是給它一個很好的過渡，而不是它只是出現。 我曾嘗試使用：在菜單的各個部分懸停與CSS轉換，但研究後，我意識到動畫將無法與顯示：無;在上面。請幫幫忙，提前

感謝， 亞當

CSS：

nav ul ul { 
    display: none; 
} 
nav ul li:hover > ul { 
    display: block; 
} 
nav ul { 
    list-style: none; 
    position: relative; 
    display: inline-table; 
    margin-top: 23px; 
    padding: 0; 
    float: left; 
} 
nav ul:after { 
    content:""; 
    display: block; 
} 
nav ul li { 
    float: left; 
    height: 50px; 
    width: auto; 
    padding: 5px; 
    margin-left: 22px; 
} 
nav ul li a { 
    display: block; 
    text-decoration: none; 
} 
nav ul ul { 
    background: #363c43; 
    border-radius: 3px; 
    border: 1px solid #2e363f; 
    padding: 7px; 
    position: absolute; 
    font-size: 0.9em; 
} 
nav ul ul:before { 
    content:''; 
    display:block; 
    width:0; 
    height:0; 
    position:absolute; 
    border-right: 7px solid transparent; 
    border-left: 7px solid transparent; 
    border-bottom:10px solid #363c43; 
    top:-8px; 
    left: 30px; 
} 
nav ul ul li { 
    height: 30px; 
    float: none; 
    position: relative; 
    padding: 0px 0px 5px 0px; 
    margin: 0px; 
} 
/* Other base styles */ 
* { 
    font-family: arial; 
} 
a:link, a:visited { 
    color: #979797; 
    font-size: 1.145em; 
    /* 18px */ 
    text-decoration: none; 
    font-weight: lighter; 
    -webkit-transition: all .25s linear; 
    transition: color .25s linear; 
} 
a:hover { 
    color: #c4c1c1; 
    font-size: 1.145em; 
    /* 22px */ 
    text-decoration: none; 
} 

HTML：

<nav> 
    <ul class="menu"> 
     <li><a href="index.php">home</a> 
     </li> 
     <li><a href="index.php">products</a> 

      <ul> 
       <li><a href="#">product 1</a> 
       </li> 
       <li><a href="#">product 2</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="index.php">solutions</a> 
     </li> 
    </ul> 
</nav> 

Answer 1

我能詳細解釋，但此人做了偉大的工作：https://stackoverflow.com/a/3332179/363605

nav ul ul { 
    display: block; 
    -webkit-transition: opacity 1s ease-in; 
    -moz-transition: opacity 1s ease-in; 
    -o-transition: opacity 1s ease-in; 
    transition: opacity 1s ease-in; 
    opacity: 0; 
    height: 0; 
    overflow: hidden; 
} 
nav ul li:hover > ul { 
    height: auto; 
    opacity: 1; 
} 

http://jsfiddle.net/pYhrk/