Sub-menu drop down on mouse hover

Note: While this snippet is still valid for Twitter Bootstrap menu based, Customizr and Customizr-Pro now embed a new option to achieve the same result. Navigate to Appearance > Customize > Header > Navigation and you’ll find it!

If you don’t want to click on the parent menu item to display your submenu items in Customizr (which is the Twitter Bootstrap native way), use the following code :

(copy and paste it in custom CSS section or in a child theme style.css file)

/*make the menu sub-menu items drop down on mouse hover */
ul.nav li.dropdown:hover > ul.dropdown-menu{
    display: block;
    margin: 0;
}

Another interesting related snippet : Make the parent menu clickable

34 thoughts on “Sub-menu drop down on mouse hover”

Alexander Richter
16 December 2016, 14 h 12 min

Thank you very much – this helped!
Bruce Talcott
20 May 2016, 12 h 55 min

Thank you it’s a great and simple solution
Chrombit Indo
7 April 2016, 5 h 16 min

Thankyou so much…
my website dropdown menu hover is working… thankyou

thewellmedical.co.id
Menaka S
12 February 2016, 6 h 50 min

Hi Harimohan,
Our developer team handles support at https://wordpress.org/support/theme/customizr. Pose your question with a link to your site. Thanks.
harimohan
11 February 2016, 19 h 17 min

I m facing one problem… sub-menu appears even without hovering over a menu . i.e. if i hover over the section that a menu can cover.. sub-menu appears itself without having to go the menu…
sadik sheikh
20 May 2015, 13 h 39 min

Thanks for this code!
Marco Zingarelli
30 March 2015, 16 h 08 min

Why don’t work for me?? 🙁

http://www.championstouch.it
- Nicolas
  30 March 2015, 17 h 22 min
  
  Hi Marco, there’s an option in appareance > customize > header > navigation to do that. Did you already try it ?
  Thanks
Junior
3 March 2015, 11 h 52 min

Thanks! You helped me, i was search for something exactly like this!
Congratulations.
vlad
31 January 2015, 23 h 38 min

Hi
I dont understand why on my computer subcategories dont drop down when you hoover over them and on other everything its working fine.
How is that possible ?
Thank you
- Nicolas
  2 February 2015, 6 h 48 min
  
  Hi,
  It could be a problem of browser cache not cleared
pari
3 November 2014, 13 h 09 min

Superb, This is what I want

Thanks a lot.

Pari
Baqer Naqvi
14 October 2014, 13 h 56 min

I was dying to find it 🙂
walayat khan
5 August 2014, 17 h 01 min

thanx to share this valuable code…..
Nicolae Iosif
31 May 2014, 20 h 05 min

Thanks for this code!
albert
1 March 2014, 6 h 28 min

hi, i am using speedy theme in word press, it did not allow me to have a dropdown menu on secondary navigation, i added some extra php code to functions php and header php and added some css, and made it work,

The only problem is, when i hover the on menu , it does not collapse smoothly , it pushes all the other containers down and it looks ugly ,i wonder how i can fix this? i would appreciate your response. Here is the link : http://www.aliyonabridal.com/blog

Thanks
Courtney
17 January 2014, 19 h 55 min

Great advice! I changed my menu from pages, to categories. I’d like the subcategories to drop down when you hoover over them in the menu bar? Is that possible?

Thanks!!

Courtney
- Nicolas
  18 January 2014, 9 h 27 min
  
  Hi Courtney, just set your subcategories as child of your parent category in the menu editor and you should be done!
  More about menus => http://codex.wordpress.org/Appearance_Menus_Screen
  Thanks
Shirley
16 January 2014, 22 h 48 min

How do I associate a submenu to the main menu? From the menus page I can’t seem to find where I can assign the main menu-submenu relationship. Thank you!
- Nicolas
  17 January 2014, 9 h 48 min
  
  Hi Shirley, please refer to this complete documentation online for menu creation : http://codex.wordpress.org/WordPress_Menu_User_Guide
  
  Hope this will help you,
  Best
Elin
13 January 2014, 17 h 01 min

Yay! I got it to work! Find the answer here! http://blog.kjodle.net/2011/08/25/how-to-create-and-use-custom-menus-in-wordpress/
Elin
13 January 2014, 16 h 31 min

Yes! If it would work like that on my page I would be happy! But I don´t know how to get the submenus to show up… It only shows the parent page when I change the theme to costumiz… Am I doing something wrong in the Menu section, maybe? I just chose wich parent-pages I want to show and added them to “menu 1”.

– Elin
Elin
12 January 2014, 20 h 41 min

I can´t see my submenus either. I am changing my theme on my webpage, and I really like this one, but of the 6 themes I tried this one is the only one where my submenus don´t show… – Elin
- Nicolas
  13 January 2014, 9 h 04 min
  
  Hi Elin, this might work like in the demo site : http://demo.presscustomizr.com You might want to share a link of your website?
Julia
9 January 2014, 12 h 23 min

Hi Nikeo,
I’d like to use your snippet but I’ve got the problem that the secondary menu doesn’t show up in customizr. I tested with twenty fourteen and that works… Do you have any idea? I’m totally new to wordpress… 🙂
- Nicolas
  9 January 2014, 12 h 33 min
  
  Hi Julia, since the recent updates of the theme, there’s an option in Customiz’it > Navigation which allows to switch between click and hover for the submenu opening.
  Thanks
  - Julia
    9 January 2014, 23 h 11 min
    
    Thanks for your immediate answer!!
    I’ve noticed this option but my problem is that the secondary menu doesn’t show up on either option. This considers only the customizr theme.
    Do you have any suggestions?
    Thanks, Julia
Simon
9 December 2013, 1 h 31 min

Works like a charm, thanks.
Rob Clarke
7 November 2013, 21 h 40 min

Yes, thank you Nikeo!
ashlee
31 October 2013, 17 h 36 min

How do I get the submenu to actually drop below the parent menu item? When I hover the submenu either covers the parent item entirely or it appears way above the parent so you cant click on it? Please help!!
- Tevita Feiloakitau
  5 December 2013, 23 h 44 min
  
  try using the z-index in the parent menu to send it to back or use it in the above to bring forward but you must have position in there as well either use relevant (which is relevant to everything around it) or absolute (regardless of everything else it will just fix it to that point you have specified based on margins etc)
  
  ul.nav li.dropdown:hover > ul.dropdown-menu{
  display: block;
  position: relevant;
  margin: 0;
  z-index:0;
  }
  The z-index property specifies the stack order of an element, an element with greater stack order is always in front of an element with a lower stack order you can you use minus values as well.
leeleeqin
12 October 2013, 15 h 14 min

Hi Nikeo,

It is what i want. But I prefer the parent menu does able to access to parent menu link. Because all my parent menu does a link for a page to land.

What should I do?
Avinash
29 September 2013, 19 h 03 min

This is what I want..
thanks Nicolas 🙂
- raggiodorato
  16 January 2014, 19 h 13 min
  
  yeahh! Just what i need …. it runs perfectly.
  I’m very happy with wordpress und customizr …
  cu

Comments are closed.

Sub-menu drop down on mouse hover

AUTHOR

Press Customizr

34 thoughts on “Sub-menu drop down on mouse hover”