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 you need to just add few lines of code in your CSS block.
Css snippetLanguage : Css
.dropdown:hover .dropdown-menu {
display: block;
}
Example Code :
<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>
More Posts related to Bootstrap,
- [Solved] Bootstrap tooltip not working
- Create Bootstrap carousel slider with Text
- Bootstrap tooltip not working
- How to disable button in Bootstrap
- Vertical align two div's in Bootstrap [HTML CSS]
- Bootstrap Button Colors Classes
- How to Change Bootstrap Carousel Slide Speed
- Right Align Text in Bootstrap framework
- How to add hint text in bootstrap input text field and text area
- Simple Login Page using Bootstrap
- Make Bootstrap Button look like a link
- Align left align text in Bootstrap
- Bootstrap Nav Menu Dropdown on hover
- Rounded Images in Bootstrap framework
- What is Bootstrap Jumbotron and how to use it
More Posts:
- SharePoint installation error - Setup is unable to proceed due to the following error This product requires Microsoft .Net Framework 4.5 - SharePoint
- [Fix] reCAPTCHA not working in Web Browser - Google
- Convert Java Object to JSON using Jackson Library - Java
- Fix Microsoft Teams Error code - 107 - Teams
- [Fix] Microsoft Teams No Network Connection Please check your network settings and try again. [2603] - Teams
- How to revert a single file from Git Repo - Git
- How to stop MongoDB Server running on Ubuntu - Ubuntu
- Can we move apps like WhatsApp, Facebook to external MicroSD card - WhatsApp