Как сделать плавное появление блока при наведении?

Question

[ipavlov_ai]

Вот кусок кода для сайта на Тильде. Есть основное меню, и два выпадающих. Сейчас при наведении на пункт основного меню появляется выпадающее меню мгновенно. Хочется, чтобы выпадающее меню появлялось плавно
Помогите, пожалуйста с:

<style>
/*Стили для основного меню*/
#rec166095362{
    position: static;
    top: 0px;
    left: 0;
    width:100%;
    z-index:9999;
    box-shadow: 0px -5px 20px 0px #000000;
}
/*Стили для выпадающего меню */
.drmenu{
    position: fixed;
    text-align: left;
    width: 100%;
    top: 90px;
    left: 0;
    display:none;
}
/*Убираем цвет фона выпадающих меню*/
.drmenu .t396__artboard {
    background:none !important;   
}
/*Появление меню при наведении на вкладку */
.vklmenu:hover .drmenu{
    display:block;
}
/*Задаём цвет вкладки в цвет ZeroMenu при наведении*/
.vklmenu:hover {
  background: #f3f4f6  !important;
  cursor: default;
}
</style>

<script>
	$(document).ready(function(){
	//Добавляем классы к блокам выпадающих меню    
        $('#rec166095366').addClass('dropmenu1 drmenu');
        $('#rec166095367').addClass('dropmenu2 drmenu');
	//Добавляем классы к вкладкам меню 
        $('div.tn-elem__1660953621533820477935').addClass('vkladkamenu1 vklmenu');
        $('div.tn-elem__1660953621533877958649').addClass('vkladkamenu2 vklmenu');
	//Добавляем выпадающие меню к соответствующим вкладкам в меню с указанием цифровых классов этих вкладок
        $('.dropmenu1').appendTo('.vkladkamenu1');
        $('.dropmenu2').appendTo('.vkladkamenu2');
        function setMenuPosition(){
        if( !($('.vklmenu').closest('.t-rec').css('position').toLowerCase() == 'fixed')) {
         $('.drmenu').css('top' , $('.vklmenu').parent().offset().top + $('.vklmenu').parent().height() -  $(window).scrollTop());
        };    
        };
        setMenuPosition();
        $(window).scroll(function(e) {setMenuPosition()});
});
</script>

Comments

[NewSantaClaus]

А html самому придумать нужно или вы дадите?)

[ipavlov_ai]

NewSantaClaus, у меня есть только этот код :(

Answer 1

[Pavel-ww]

Например так

/*Появление меню при наведении на вкладку */
.vklmenu:hover .drmenu {
    display: block;
    animation: myFadeIn 400ms ease-in;
}
@keyframes myFadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}