:root{
    --submenu-height: 500px;
    --submenu-bezier: ease-in-out;
}
ul li.submenu a:hover ~ div {
    height: var(--submenu-height);
}
ul li.submenu a:hover ~ div>div {
    opacity: 1;
    visibility: visible;
}

ul li.submenu > div {
    transition: 300ms all var(--submenu-bezier);
    overflow: hidden;
}

ul li.submenu>div>div{
    opacity: 0;
    visibility: hidden;
    transition: 300ms all var(--submenu-bezier);
}

ul li.submenu>div:hover{
    height: var(--submenu-height);
}

ul li.submenu div:hover >div {
    opacity: 1;
    visibility: visible;
}