Bootstrap navbar dropdown with hover effect

View demo Download

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

Here are basic code snippets