Bootstrap

Bootstrap comes with a cool CSS menu which support submenu’s out of the box. The only behaviour I almost always need to change is when the submenu should be displayed. By default the submenu is displayed when clicked on on it’s parent menu item, but I want it to open when mouse hovering the parent menu item. Luckily this can easily be done by adding the follow code to your CSS file:

ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; }

The caret

An element I almost always hide is the caret (the little arrow head pointing downward). Hiding the caret can be done by adding the following line to your CSS file:

.nav .dropdown-toggle .caret { display:none; }

See the Pen Bootstrap Dropdown menu on Hover by Mahmoud Yasseen (@myasseen) on CodePen.dark

if you are making a wordpress theme, Let the parent menu item link to a page

Now that your submenu opens on hovering the parent menu item it’s most likely you want to let your parent menu item link to its own page. This can be done by removing the data-toggle attribute from the <a> element.

   // OLD:
   $item_html = str_replace('<a', '<a class="dropdown-toggle" data-toggle="dropdown" data-target="#"', $item_html);
	 
   // NEW
   $item_html = str_replace('<a', '<a class="dropdown-toggle"', $item_html);

As you can see I’ve also removed the data-target attribute since it has no use any more now the data-toggle attribute is gone.

That’s all, now you’ve got a Bootstrap menu that opens sub items on mouse over.