Плавное появление выпадающего списка

[Анатолий1944]

Привет!

Есть меню которое при наведении показывает выпадающий список,

хочу сделать так, чтобы выпадающий список выпадал плавно, нежно:)

Знаю только html+css, желательно решение на этих языках нужно.

Я новичок, подскажите пожалуйста нужный код, и куда нужно его вписать. 

 

Вот коротко код одного раздела меню:

 HTML:

            <nav id="menuVertical">

<ul>
       <li>Раздел меню<span id="kolichestvo">( 22 )</span>
    
       <ul>
                  <li class="test_2">Выпадашка</li>
                  <li class="test_2">Выпадашка</li>
                  <li class="test_2">Выпадашка</li>
       
            </ul>
        </li>

</nav><!--menuVertical-->

CSS:

#menuVertical

{width:100%;height:auto;

        padding:0px;
         margin-top:0px;
         margin:0px;

}
/*  блок li */
    #menuVertical ul{
        display:block;
        width:350px;
        margin:0px;
    
        padding:0px;

        list-style:none;
        position:relative;
        border-radius: 5px;
        background:white;
        height:300px;

        
    }

    
    /* Управление елементами li */
        #menuVertical ul li{
                display:block; 
                width:350px; 
                
                height:30px; 
                position:relative;
                font-size:16px;
                color:#6B6B6B;
        border-bottom:1px solid #8F8F8F;
        border-top:1px solid #8F8F8F;
        font-weight:bold;
        margin-top:10px;
        background:#FFFFFF;
        text-align:center;
                            border-radius: 5px;
                            height:35px;
                            padding-top:5px;
cursor: pointer;
}
     
         /* Управление елементами li при наведении */
             #menuVertical ul li:hover{
                display:block; 
                
                height:30px; 
                position:relative;
                font-size:17px;
                color:white;
        border-bottom:1px solid #8F8F8F;
        border-top:1px solid #8F8F8F;
        padding:0px;
        height:35px;
                            padding-top:5px;
        
    background: #295C79;
        text-align:center;
}
     

        /*******Скрывает блок, который должен выпадать ********/
            #menuVertical ul li ul{
                position:absolute;
                top:-300px;
                right:100%;/*поменяли здесь*/
                display:none;
                width:auto;
                
            }
            /*******Выпадающий блок при наведении ********/
            #menuVertical ul li:hover ul{
            display:block;
            width:500px;
            height:1000px;
            padding-top:0px;
            margin-right:0px;
            
            border:1px solid #F6F6F6;
            background-color: #F6F6F6;
&::-webkit-input-placeholder,
        &::-moz-placeholder,
        &:-moz-placeholder,
        &:-ms-input-placeholder {
            color: #c0392b;
        }
            
          
                    
                }
                            /*******Воздействие на елементы с классом .test_2 ********/
                #menuVertical ul li ul li.test_2{
                    white-space:nowrap;
                    text-transform:none;
                    padding:0px;
                    font-size:16px;
                    background:#FFFFFF;
                    
                    border-radius: 5px;
        font-family:sans-serif;
                    color:#6B6B6B;
            margin:1px 0 1px 75px;
    padding-top:4px;
                    
text-align:center;

                }
                            /*******Воздействие на елементы с классом .test_2 ПРИ НАВЕДЕНИИ НА НИХ ********/
                    #menuVertical ul li ul li.test_2:hover {
                    white-space:nowrap;
                    text-transform:none;
                   
                    font-size:16px;
         
                    color:black;
                    border-radius: 5px;
margin:1px 0 1px 75px;
                    font-family:sans-serif;
                    text-align:center;
        padding-top:4px;
                    color:white;
                        background: #295C79;

                }
                
                
              

[Alexandr37]

http://codepen.io/Sanchos86/pen/yVMmXQ  вот например.