Smooth scroll down of submenu on main menu hover using css

Vote count:

0

I am trying to get a smooth drop-down transition to the sub-menu items on hovering the main-menu item. Initially the sub-menu is hidden and on hover of main-menu item the sub-menu displays, but not a smooth drop-down. Here is a fiddle http://ift.tt/1n0Bfyt

No Jquery/Javascript please

HTML

<ul class="main-menu">
    <li> <a href="">Menu 1</a>
        <ul class="sub-menu">
            <li >Sub menu 1.1</li>
            <li>Sub menu 1.2</li>
            <li>Sub menu 1.3</li>
        </ul>
    </li>
    <li><a href="">Menu 2</a>
        <ul class="sub-menu">
            <li>Sub menu 2.1</li>
            <li>Sub menu 2.2</li>
            <li>Sub menu 2.3</li>
        </ul>
    </li>
    <li><a href="">Menu 3</a>
        <ul class="sub-menu">
            <li>Sub menu 3.1</li>
            <li>Sub menu 3.2</li>
            <li>Sub menu 3.3</li>
        </ul>
    </li>
    <li><a href="">Menu 4</a>
        <ul class="sub-menu">
            <li>Sub menu 4.1</li>
            <li>Sub menu 4.2</li>
            <li>Sub menu 4.3</li>
            <li>Sub menu 4.4</li>
        </ul>
    </li>
    <li><a href="">Menu 5</a>
        <ul class="sub-menu">
            <li>Sub menu 5.1</li>
            <li>Sub menu 5.2</li>
            <li>Sub menu 5.3</li>
        </ul>
    </li>
</ul>

CSS

ul{
    list-style:none;
    padding:0;
}
a{
    text-decoration:none;
    display:block;
}

.main-menu{
    width:50%;
    margin-left:15%;
}
.sub-menu{
    display:none;
    background-color:#D7D5D5;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.sub-menu li{
    padding: 3px 8px;
}

.main-menu > li > a{
    background-color:#4D4A4A;
    color:#fff;
    border-bottom: 1px solid #3D3B3B;
    border-radius:2px;
    padding: 5px 10px;
    font-size:18px;
}

.main-menu li:hover > ul{
    display:block;
}

asked 2 mins ago

user3588539

1