Bootstrap Nav Menu Dropdown on hover


Posted on : Wed, 15th Apr 15 01:29 pm (Updated on : Wed, 15th Apr 15 01:29 pm) UTC
Author : Code2care
100+ votes

By default when you use the Navbar as provided by Bootstrap example under 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 the you need to just add few lines of code in your css block.

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

Example Code :



Navbar.html Language : Html
<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 on being clicked as default. Read the post : <a href="http://code2care.org/2015/bootstrap-nav-menu-dropdown-on-hover">Link</a></h2>

Advertisements




I have added the code to jsfiddle,

Code2care's mission is to share varied knowledge in technical and non-technical areas gathered during day-to-day learnings and development activities so that our visitors can leverage this portal to find solutions to their queries without re-inventing the wheel. Technical posts include Learnings, Tutorials, Video Tutorials, Code Snippets, Tips-n-tricks.

Follow us : Facebook - Twitter - Google +