Bootstrap dropdown menu show on hover

Question

How can i change the dropdown menu to open on hover?

<div class="tab-content">
  <div class="tab-pane fade in active" id="Eventos">
    <div class="col-md-12">
      <p>
      <div class="btn-group">
        <button type="button" class="btn btn-warning dropdown-toggle btn-xs" data-toggle="dropdown"></button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
        </ul>
      </div>
      </p>
    </div>
  </div>
</div>

Found this:

ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;   
}

But isn't working in this case (tabs?)

Thanks

Does this answer your question? [Bootstrap Dropdown with Hover](https://stackoverflow.com/questions/16214326/bootstrap-dropdown-with-hover) — fkoessler, Jul 28 '21 at 12:54

score 1 · Answer 1 · answered Oct 03 '13 at 18:17

1

Use an adjacent CSS selector..

.dropdown-toggle:hover + ul.dropdown-menu {
   display: block;   
}

Demo: http://bootply.com/85298

answered Oct 03 '13 at 18:17

Carol Skelly

351,302
90
710
624

Thanks @Skelly but the menu fades out before the mouse go into it. – Khrys Oct 03 '13 at 18:19
Yeah I missed that.. Is the only way with JS/jQuery? – Carol Skelly Oct 03 '13 at 18:22

Bootstrap dropdown menu show on hover

1 Answers1