How enable Hover event for bootstrap menus? [duplicate]

Question

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 , and it's not appropriate :/

Answer 1

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).