html - 子菜单出现效果

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/ .

我该如何做到这一点，以便当用户将鼠标悬停在列出的元素上时，子菜单“逐渐出现”，并在 200 毫秒的持续时间内从不可见变为可见？

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;
}