Search code examples
javascriptcssdrop-down-menuhovermousehover

How enable Hover event for bootstrap menus?

I implement a bootstrap responsive rich menu and it works fine. It works on Click event ,my question is : How can I change it to Hover event ?
all bootstrap menus have this issue . bootstrap doesn't have any support for this ? this is the menu I use : http://geedmo.github.io/yamm/ my problem solved with : 

<style>
    li.dropdown:hover .dropdown-menu {
        display: block;
    }

    li.dropdown:hover .dropdown-toggle {
        color: #555;
        background-color: #e5e5e5;
    }
</style>

but a new problem happened , the submenus showed in the end of the menus when I shrink the browser showed in the end of the menu , and it's not appropriate :/

Solution

  • Add this style to your page.

    <style>
    li.dropdown:hover .dropdown-menu{display:block}
    li.dropdown:hover .dropdown-toggle{color:#555; background-color:#e5e5e5}
</style>

    First one will enable dropdown on mouse hover and second one will change the menu header color (choose the appropriate color for your page).