Display Bootstrap’s Navbar Dropdown Menu On Hover


Using only 3 simple CSS rules, you can have your Bootstrap’s navbar menu dropdown display on hover seamlessly.  Below is the CSS code:

/* display dropdown menu on hover
   only when navbar is not in mobile mode (hamburger menu mode) */
@media (min-width: 768px) 
	/* display submenu on hover */
	.dropdown:hover .dropdown-menu {
		display: block;

	/* since submenu gets displayed too when dropdown menu is clicked 
		and remains displayed until dropdown menu is clicked again,
		we need to hide submenu */
	.open > .dropdown-menu {
		display: none;

	/* also dropdown menu is highlighted when clicked,
		so we need to unhighlight dropdown menu */
	.navbar-default .navbar-nav > .open > a, 
	.navbar-default .navbar-nav > .open > a:focus {
		background-color: transparent;


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s