子菜单显示效果

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 of，我将如何做到这一点？

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