Всем привет! Возникла такая проблема: делаю выпадающее меню, все работает как надо, выпадает, но никак не получается сделать выпадение через transition не резким, а плавным. Пробовал прописать в разных местах свойство transition, но не получается. Подскажите, пожалуйста, в чем проблема.

Вот часть html-кода:

<nav>
<ul class="menulink">
<li><a href=/Aktivno_borites_s_lishnimi_kilogrammami>Как правильно худеть</a>
<ul>
<li><a href="/Aktivno_borites_s_lishnimi_kilogrammami/Bolshe_xodite">Ходьба для похудения</a></li>
<li><a href="/Aktivno_borites_s_lishnimi_kilogrammami/Delajte_massazh_i_gimnastiku">Массаж для похудения</a></li>
<li><a href="/Aktivno_borites_s_lishnimi_kilogrammami/Kompleks_uprazhnenij_dlya_talii,_zhivota_i_beder">Комплекс упражнений для похудения</a></li>
<li><a href="/Aktivno_borites_s_lishnimi_kilogrammami/Ne_otstupajte_ot_fiziologicheskix_norm">Не отступайте от физиологических норм</a></li>
<li><a href="/Aktivno_borites_s_lishnimi_kilogrammami/Ne_pereedajte">Диета</a></li>
</ul>
</li>
</ul>
</nav>

И css-код:

.menu{ background-color: rgba(255, 255, 255, 0.8); border-radius: 5px; position: absolute; top: 0%; left: 0%; height: auto; width: 20%; box-shadow: 0 0 15px rgba(204, 255, 255, 0.7); }
.menulink{ list-style: none; margin-left: -30px; margin-right: 5px; margin-top: 1%; line-height: 1.4; }
.menu nav ul ul{ display: none; list-style: none; margin-top: 1%; margin-bottom: 2%; margin-left: -15%; }
.menu nav ul li:hover > ul{ display: block; }
.menu nav ul li a { text-decoration: none; border-bottom: 1px dotted black; font-size: 16px; color: black; display: block; width: 100%; }
.menu nav ul li a:hover{ text-decoration: none; color: navy; font-size: 17px; background-color: rgba(204, 255, 255, 0.9); }
.menu nav ul li a:active{ text-decoration: none; color: navy; font-size: 15px; }

Извиняюсь за изложение кодов в таком виде - впервые на форуме!