userimage

Bootstrap display dropdown sub menus on mousehover event

Below snippet of mine display the submenues when onclick event firing.

<div class="btn-group">

    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu ">

        <li><a id="user-choice-1" href="#">Submenues1</a></li>

        <li><a id="user-choice-2" href="#">Submenues2</a></li>

        <li><a id="user-choice-3" href="#">Submenues3</a></li>

        <li><a id="user-choice-4" href="#">Submenues4</a></li>

    </ul>

</div>

But I want to populate the submenus from the dropdown when mousehover event will fire.

Please suggest.

userimage

Please include below script on your javascript file to complete your requirement successfully.


$("#dropdown_hover").hover(            
            function() {
                $('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
                $(this).toggleClass('open');
                $('b', this).toggleClass("caret caret-up");                
            },
            function() {
                $('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
                $(this).toggleClass('open');
                $('b', this).toggleClass("caret caret-up");                
      }); 
Answer is