Bootstrap Menu
Hover template

Free menu on hover template for your projects, built with the latest Bootstrap, HTML, CSS & JavaScript. MIT Licensed - free for personal & commercial use.

edit & download Live preview
  • License
    MIT License
  • Free for commercial use?
  • Bootstrap version
  • NPM downloads
  • GitHub stars
    GitHub Repo stars

Bootstrap navbar dropdown with hover effect

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
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>
<li class="nav-item"><a class="nav-link" href="#"> About </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Services </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Hover me </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
<li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
<li><a class="dropdown-item" href="#"> Submenu item 3 </a></li>
</div> <!-- navbar-collapse.// -->
</div> <!-- container-fluid.// -->
view raw code.html hosted with ❤ by GitHub
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
.navbar .nav-item .dropdown-menu{ display: none; }
.navbar .nav-item:hover .nav-link{ }
.navbar .nav-item:hover .dropdown-menu{ display: block; }
.navbar .nav-item .dropdown-menu{ margin-top:0; }
/* ============ desktop view .end// ============ */
view raw style.css hosted with ❤ by GitHub

Also it is possible to make dropdown hover effect with vanilla js
Solution 2. With Javascript mouseover method
document.addEventListener("DOMContentLoaded", function(){
// make it as accordion for smaller screens
if (window.innerWidth > 992) {
document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){
everyitem.addEventListener('mouseover', function(e){
let el_link = this.querySelector('a[data-bs-toggle]');
if(el_link != null){
let nextEl = el_link.nextElementSibling;
everyitem.addEventListener('mouseleave', function(e){
let el_link = this.querySelector('a[data-bs-toggle]');
if(el_link != null){
let nextEl = el_link.nextElementSibling;
// end if innerWidth
// DOMContentLoaded end
view raw script.js hosted with ❤ by GitHub

Back to all examples

Get more free tools & themes

Join the newsletter to receive more free templates - including Instagram, Facebook or Amazon clone templates, as well as multiple free tools & resources.

    By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw. Privacy Policy