子菜單顯示效果

Question

我的代碼在我的網站下面的行...

HTML：

<div id="left-sidebar" class="span3 sidebar"> 
    <ul class="product-categories"> 
     <li class="cat-item cat-item-60"><a href="product-category/hot-deals/">Hot Deals</a></li> 
     <li class="cat-item cat-item-61"><a href="product-category/starter-kits/">Starter Kits</a></li> 
     <li class="cat-item cat-item-62"><a href="product-category/mechanical-mods/">Mechanical Mods</a></li> 
     <li class="cat-item cat-item-65"><a href="product-category/batteries-chargers/">Batteries &amp; Chargers</a> 
      <ul class="children"> 
       <li class="cat-item cat-item-78"><a href="product-category/batteries-chargers/battery-cases/">Battery Cases</a></li> 
      </ul> 
     </li> 
     <li class="cat-item cat-item-67"><a href="product-category/accessories/">Accessories</a></li> 
     <li class="cat-item cat-item-68"><a href="product-category/diy-supplies/">DIY Supplies</a></li> 
     <li class="cat-item cat-item-70"><a href="product-category/coming-soon/">Coming Soon</a></li> 
     <li class="cat-item cat-item-71"><a href="product-category/clearance/">Clearance</a></li> 
    </ul> 
</div> 

CSS：

.sidebar ul.product-categories li ul.children { 
    display: none; 
    visibility: hidden; 
    -webkit-transition: all 200ms linear; 
    -moz-transition: all 200ms linear; 
    -o-transition: all 200ms linear; 
    transition: all 200ms linear; 
} 

.sidebar ul.product-categories li:hover ul.children { 
    display: block; 
    visibility: visible; 
} 

，最終使 - http://codepen.io/anon/pen/zrKvy/ 。

我該如何做到這一點，以便當用戶懸停在列出的項目上時，子菜單'逐漸出現'，在200ms的持續時間內從不可見變爲可見？

Answer 1

將懸停時的默認不透明度設置爲0並將其更改爲1。

.sidebar ul.product-categories li ul.children { 
    opacity: 0; 
} 
.sidebar ul.product-categories li ul.children { 
    display: inline-table; 
    -webkit-transition: all 200ms linear; 
    -moz-transition: all 200ms linear; 
    -o-transition: all 200ms linear; 
    transition: all 200ms linear; 
} 

.sidebar ul.product-categories li:hover ul.children{ 
    opacity: 1; 
}