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
:hoverto nav-item and add classdisplay:block - Note: bootstrap has
margin-topondropdown-menuelements. 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