How to apply transition effect using CSS3

Question

I have created a simple vertical menu bar in ASP.Net using css3 and do not familiar with applying additional transition effects

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

Can anyone do some magic how to open/close the submenus slowly using transition effect and also apply the fade in/out on submenu names.

I have tried the below but no effect.

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

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