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;