How to create slow dropdown menu?

Hello! How to create slow dropdown menu?

Hi @soldek,

I hope you are well today and thank you for your question.

You can create slow dropdown menu by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS

body #branding #main-nav li:hover ul {
  height: 125px;
  border-width: 4px;
}
#main-nav ul li ul {
   display: block; 
   height: 0; 
  -webkit-transition: height 2s;
  border-width: 0;
  overflow: hidden
}

Change the height value 125px in the above code to whatever height of your sub menu is or just share me your site URL so that i can find out it.

Best Regards,
Movin

Thanks!

You are most welcome here :slight_smile:

This works great if you only have one item in your drop down menu, but if you have a drop down with 2 items and another drop down with 6 items, then you can’t see all of the items in the drop down that has six, unless you make it long enough to view all six, then the drop down with 2 is longer than it needs to be.

Hi @wpjunkie,

I could understand this situation.

In this situation you have to set different heights for different sub menus having different menu items.

You can use the CSS code as following where i have set different height for sub menus having parent menu item ids as 1631 and 1633 so change these ids with the parent menu ids on your site.

body #branding #main-nav li:hover ul {
  border-width: 4px;
}
#main-nav ul li ul {
   display: block; 
   height: 0; 
  -webkit-transition: height 2s;
  border-width: 0;
  overflow: hidden
}

body #branding #main-nav li#menu-item-1631:hover ul {
  height: 125px;
}
body #branding #main-nav li#menu-item-1633:hover ul {
  height: 105px;
}

Cheers,
Movin