Expand sub-menus on hover in a menu block

Question

I need to show menus expanded in the sidebar. I used the menu blocks to show the submenus. But now the problems is when I hover on the parent menu initially it is not showing the submenus which was appearing before.
And also submenus is expanded only when click the parent menu which then lists all the submenus with expanded.

Please tell me how to show the submenus on hover in menu blocks when the submenus are not expanded

Answer 1

You can use this module Nice Menus. Nice Menus enables drop-down/right/left expandable menus. It uses only CSS for most browsers, with minimal Javascript for IE6. (Version 2 uses the Superfish jQuery plugin for all browsers, with an option to disable JS, and falls back to CSS-only for browsers that can handle it.)

Three styles/types of menus are currently possible: horizontal, menus drop down; vertical, menus fly to the left; vertical, menus fly to the right. There is a handbook page that provides a list of sites that use Nice menus.

Answer 2

The DHTML Menu module https://drupal.org/project/dhtml_menu should do what you're looking for. The module description suggests that you need to click on items to expand them, but newer versions of the module have a "hover" option. Make sure you use the "dev" version as the recommended release is very old and doesn't contain the newest features.

Answer 3

First you can display all the elements of the menu and then using CSS you can hide all the child elements and when you hover over the parent elements to display their childs.

Or, simpler you can use this module (CSSMenu), you can read the documentation on how to do it, but it's pretty straightforward. Also here is a demonstration on what this module does.

Answer 4

For all versions there is easy solution I haven't found anywhere:( Go to CSS and add display: block; to expandable menu on :hover.In my case as example:

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