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,
- How to disable button in Bootstrap
- Bootstrap tooltip not working
- Bootstrap Button Colors Classes
- Rounded Images in Bootstrap framework
- Right Align Text in Bootstrap framework
- How to add hint text in bootstrap input text field and text area
- Create Bootstrap carousel slider with Text
- Bootstrap Nav Menu Dropdown on hover
- [Solved] Bootstrap tooltip not working
- Align left align text in Bootstrap
More Posts:
- Adding internet permission to Android Project - Android
- Spotlight Search Mac Keyboard Shortcut - MacOS
- How to Clone Bitbucket repository to Local Computer - Git
- How to Display content of a file in Terminal Screen? - Linux
- Java JDBC: Insert Java 8 LocalDate and Time using PreparedStatement - Java
- Android [SDK Manager] The system cannot find the path specified - Android-Studio
- WhatsApp Web escanner - WhatsApp
- Git: Step-by-Step - How to Push Local Brach to GitHub - Git