如何使用CSS3应用过渡效果

Question

我使用css3在ASP.Net中创建了一个简单的垂直菜单栏，并且不熟悉应用其他过渡效果

ASPX：

<div class="meny">
    <h2>Menu</h2>
    <ul>
        <li>
            <a href="#" title="Menu1"><img style="margin-left: 15px" src="Style/css3menu1/bcontact3.png" alt=""/></a>
            <ul class="submenu">
                <li><a href="#">submenu1</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu3</a></li>
            </ul>
        </li>
        <li>
            <a href="#" title="Menu2"><img style="margin-left: 15px" src="Style/css3menu1/reports.png" alt=""/></a>
            <ul class="submenu">
                <li><a href="#">submenu1</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu3</a></li>
            </ul>
        </li>
        <li>
            <a href="#" title="Menu3"><img style="margin-left: 15px" src="Style/css3menu1/bregister.png" alt=""/></a>
            <ul class="submenu">
                <li><a href="#">submenu1</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu3</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS3：

.meny {
    display: none;
    padding: 5px;
    overflow: auto;
    background: #333;
    color: #eee;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
    .meny ul {
        margin-top: 0px;
    }
        .meny ul li {
            display:inline-block;
            width: 500px;
            list-style: none;
            font-size: 15px;
            font-family: Calibri;
            padding: 3px 10px;
        }
            .meny ul li:before {
                /*content: '-';*/
                margin-right: 5px;
                color: rgba( 255, 255, 255, 0.2 );
            }

    .meny .submenu {
        display: none;
    }

    .meny ul li:hover .submenu {
        display: block;
    } 

任何人都可以做一些魔法如何使用过渡效果缓慢打开/关闭子菜单，并在子菜单名称上应用淡入/淡出。

我尝试过以下但没有效果。

.meny ul .submenu {
    opacity: 0;
    -webkit-transition: opacity 1s, visibility 1s;
    transition: opacity 1s, visibility 1s;
}

.meny ul li:hover .submenu {
    opacity: 1;
}