CSS下拉菜單顯示動畫

Question

我爲我的網站的導航欄使用了一個導航列表，當用戶將鼠標懸停在某些列表項上時，下拉菜單會顯示額外的導航選項。在我的情況下，當用戶將鼠標懸停在「品牌」項目上時，所有不同品牌都會出現下拉菜單。目前下拉菜單立刻出現，但我希望它出現在一個動作中，就好像它正在滑落，而不是立即出現。這是可能的CSS或我需要一些jQuery魔術？代碼：

HTML：

<section id="nav"> 

     <div id="nav-wrapper"> 

      <ul id="nav-list"> 

       <li id="nav-home"><a href="">Home</a> 
       </li> 
       <li id="nav-brands"><a href="">Brands</a> 
        <ul id="brands-list"> 
         <li><a href="">Brand 01</a> 
         </li> 
         <li><a href="">Brand 02</a> 
         </li> 
         <li><a href="">Brand 03</a> 
         </li> 
         <li><a href="">Brand 04</a> 
         </li> 
         <li><a href="">Brand 05</a> 
         </li> 
        </ul> 
       </li> 
       <li id="nav-about"><a href="">About Us</a> 
       </li> 
       <li id="nav-contact"><a href="">Contact Us</a> 
       </li> 

      </ul> 

     </div> 

    </section> 

CSS：

#nav-brands { position:relative; } 

#nav-list li:hover ul { display: block; opacity: 1; visibility: visible; background-color: #fff; } 

#brands-list { padding: 10px 0px 0px 0px; position: absolute; top: 20px; left: -35px; width: 120px; box-shadow: none; display: none; opacity: 0; 
       visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; 
       -o-transition: opacity 0.2s; -transition: opacity 0.2s; border:thin solid #000000; border-radius:0px 0px 5px 5px; 
       border-top:0px; 
} 

#brands-list li { display: block; margin:0px 0px 5px 0px; padding:0px 0px 5px 0px; text-align:center; border-bottom:thin solid #CECECE; 

} 

#brands-list li:hover {} 

#brands-list li:last-child { border-bottom:0px; } 

Answer 1

沒有jQuery的魔力。

css的方法是將你的子列表包裝在div中。使用該div設置子菜單位置，然後使用一個技巧將內部列表顯示出您正在尋找的滑動效果。

見這裏：http://jsfiddle.net/vrGfc/

此外，刪除從子菜單本身懸停效果。它只需要應用於包裝div。

Answer 2

有沒有需要任何的jQuery或類似的是，這裏任何東西 - 你正在尋找的CSS屬性是 「過渡」 - http://www.w3schools.com/css/css3_transitions.asp

Answer 3

查看示例

http://jsfiddle.net/DHW9v/1/

你需要一套過渡定時功能

transition: opacity .8s ease-in-out;