"Dropdown on hover"
Bootstrap 3.1.0 Snippet by msurguy

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <p class="lead">Roll over the button on the left to see a dropdown</p> Rollover dropdown: <!-- Our Special dropdown has class show-on-hover --> <div class="btn-group show-on-hover"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> Regular dropdown: <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div>
body{ padding:10px; } .show-on-hover:hover > ul.dropdown-menu { display: block; }

Related: See More


Questions / Comments:

Perfect, thanks

Mark Railton () - 5 years ago - Reply 0


like it

sumon () - 5 years ago - Reply 0


does it work on mobile?

fahim () - 5 years ago - Reply 0


Same question I have

Jitendra Vyas () - 5 years ago - Reply 0


Yes it works on mobile. But not the hover effect obviously. It functions as a regular drop-down on mobile. On Click (tap)

Adam Looze () - 4 years ago - Reply 0