SlideToggle Effect In Menu

SlideToggle Effect In Menu

====== CSS ======
@media (min-width:768px){
.custom-menu-primary .hs-menu-wrapper > ul > li ul {
   visibility:visible !important;
   opacity:1 !important;
   max-height:0;
   overflow:hidden;
   transition:all 0.5s ease !important;
 }
}

====== JS =======

$('.custom-menu-primary .hs-menu-wrapper > ul > li ul').each(function(){
   $(this).wrapInner('<div class="inner_part"></div>');
 });
 $('.custom-menu-primary .hs-menu-wrapper > ul li').hover(function(){
   var eachHeight = $(this).children('ul').children('.inner_part').outerHeight();
   $(this).children('ul').css('max-height', eachHeight );
 },function(){
   $(this).children('ul').css('max-height', '0px' );
 });


 $('.custom-menu-primary .hs-menu-wrapper > ul > li ul').hover(function(){
   $(this).css('overflow', 'visible' );
 },function(){
   $(this).css('overflow', 'hidden' );
 });