bootstrap menu show menu on hover instead of click

Question

I'm using bootstrap to generate html horizontal menu

<div class="btn-group"">             
    <div class="btn-group">
        <button type="button" data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">About Us<span class="caret"></span></button>
        <ul class="dropdown-menu">
           <li><a href="/a/">Submenu 1</a></li>
           <li><a href="/b/">Submenu 2</a></li>
        </ul>
    </div>
</div>

This works on click, how can I rework this to change behaviour, to show submenu items menu on hover instead of click ?

Andrew Bone · Accepted Answer · 2015-11-28 22:55:28Z

5

Add this css

.btn-group:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

answered Nov 28, 2015 at 22:55

Andrew Bone

7,3112 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1765862 Over a year ago

this opens all submenu items, what if I have more than one main menu?

Andrew Bone Over a year ago

Give each menu a unique class class="dropdown-menu dd-about" also each button needs to be in a uniquely classed div like about-btn

aagrawal207 Over a year ago

Hey, this works for me with a little changes. Thanks. I have a problem, with hovering, clicking is still working, don't want click to work...only hover.

Collectives™ on Stack Overflow

bootstrap menu show menu on hover instead of click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related