Back to main Free Hosting Bootstrap Builder Free UI Kit
Navbar dropdown onhover vector illustration

Bootstrap navbar dropdown with hover effect

View demo (CSS) View demo (JS) Download

Get 700+ Material components for the latest Bootstrap 5 for free. This component is also available as ready-to-use solution in MDB UI Kit. Learn more about Bootstrap Dropdown here, or download MDB Free version with 700+ components here.

How to show dropdowns with hover effect? Most front-end developers prefer to show dropdown when mouse hovers on it.

Steps to create simple hover navbar
  • It is better to create hover effect only for desktop screens. Use media query @media all and (min-width: 992px) { // CSScode }
  • Hide dropdown menu by adding display:none.
  • Add pseudo-class :hover to nav-item and add class display:block
  • Note: bootstrap has margin-top on dropdown-menu elements. Remove it by adding margin-top:0
Solution 1. With plain HTML/CSS

Also it is possible to make dropdown hover effect with vanilla js
Solution 2. With Javascript mouseover method

Back to all examples

Creating an e-commerce project?