menu dropdown jQuery com animação especial [fechado] - javascript, jquery, html, css, animação

Quero construir um menu suspenso com jQuery como o seguinte site fez:
https://www.eataly.com/

Atualmente estou pendurado na animação suspensa. Não tenho ideia de como eles fazem isso e não consigo descobrir como em seu código.

Minha melhor ideia era deslizar para baixo todos os elementos li dentro do ul de um item do menu principal. Mas não é o que parece no site.

Eu carreguei o projeto aqui, no jsfiddle ele não funciona bem como no site independente. https://github.com/tyurderi/jquery-menu

Fico feliz se você puder me ajudar a construir esta animação para o meu menu.

Respostas:

A "animação suspensa" no menu principal do site vinculado é obtida por transformações CSS, não por jQuery.

Olhe para o bit de código em media-queries.css arquivo, a partir da linha 480:

/* menu desktop hover effects */
.js-opened-effect .nav-primary > li > ul{
display: block;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
-webkit-transition: -webkit-transform 0.26s ease;
-moz-transition: -moz-transform 0.26s ease;
-ms-transition: -ms-transform 0.26s ease;
-o-transition: -o-transform 0.26s ease;
transition: transform 0.26s ease;
}

.js-opened-effect .nav-primary > li:hover > ul{
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1);
}
.js-opened-effect .nav-primary ul li > ul{
display: block;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
-o-transform-origin: left;
transform-origin: left;
-webkit-transition: -webkit-transform 0.26s ease;
-moz-transition: -moz-transform 0.26s ease;
-ms-transition: -ms-transform 0.26s ease;
-o-transition: -o-transform 0.26s ease;
transition: transform 0.26s ease;
}

.js-opened-effect .nav-primary ul li.js-sub-opened:hover > ul,
.js-opened-effect .nav-primary > li.js-main-opened ul li.js-sub-opened:hover > ul{
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}

É aí que você deve verificar se deseja replicar a funcionalidade. Aqui está um exemplo mínimo em JSFiddle para provar que esta é a parte que você está procurando.