"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"> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Help</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown </a> <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> </li> </ul> </div> </div>
ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; }

Related: See More


Questions / Comments:

This is almost what I've been looking for except that I want the Menu that have been toggle as drop down to be able to have a clickable link. This way, user have the ability to view the main page for the Drop Down, or can choose to view the page for each of the sub's.

MatDojer () - 8 years ago - Reply 0