Sub Menu com Fade CSS

by Rafael Nepomuceno

HTML

<ul id="navmenu">
    <li><a href="#">Menu</a>

        <ul class="sub-menu">
            <li><a href="#">Sub Menu Text 1</a></li>
            <li><a href="#">Sub Menu Text 2</a></li>
        </ul>
    </li>
</ul>

CSS

#navmenu .sub-menu {
    transition: all 0.6s ease;
    visibility: hidden;
    opacity: 0;
}

 #navmenu li {
    position: relative;
}

 #navmenu li .sub-menu {
    position: absolute;
    top: 60px;
    left: 0;
    width: 165px;
    background-color: #ccc;
}
#navmenu li:hover .sub-menu {
    top:40px;
    visibility: visible;
    opacity: 1;
}