Bootstrap Nav Menu Dropdown on hover

By default when you use the Navbar as provided by the Bootstrap example under the Components Section the dropdown list is displayed only when you click on it. But if you wish to change this to happen when you hover over the dropdown option you need to just add a few lines of code in your CSS block.

Css snippetLanguage : Css
.dropdown:hover .dropdown-menu {
   display: block;
}

<nav class="navbar navbar-default">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Code2care : Lines of Code for Change</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="http://code2care.org">Code2care</a>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="http://code2care.org/topic/android/page-1/">Android</a></li>
        <li class="dropdown">
          <a href="http://code2care.org/topic/bootstrap/page-1/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Bootstrap<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Example 1</a></li>
            <li><a href="#">Example 2</a></li>
            <li><a href="#">Example 3</a></li>
            <li class="divider"></li>
            <li><a href="#">Example 4</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
    
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
            <li class="divider"></li>
            <li><a href="#">Option 4</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<h2 style="padding:30px">The Navbar dropdown options will be displayed on hover instead of being clicked as default. Read the post : <a href="http://code2care.org/2015/bootstrap-nav-menu-dropdown-on-hover">Link</a></h2>

Human-Written Content: This article was demonstrated by a human, not AI.

Please support independent contributors like Code2care by donating a coffee.

This is not an AI-generated article but is demonstrated by a human on an M1 Mac running macOS Sonoma 14.0.

Please support independent contributors like Code2care by donating a coffee.

Buy me a coffee!