---
title: "How to Open Bootstrap dropdown list on hover?"  
description: "How to Open Bootstrap dropdown list on hover?"  
author: "Anonymous User"  
published: 2015-03-05  
updated: 2015-03-05  
canonical: https://www.mindstick.com/forum/12999/how-to-open-bootstrap-dropdown-list-on-hover  
category: "bootstrap"  
tags: ["jquery", "javascript", "dropdown"]  
reading_time: 2 minutes  

---

# How to Open Bootstrap dropdown list on hover?

Here I’m working on a [web application](https://www.mindstick.com/articles/13069/progressive-web-application-pwas-all-you-need-to-know-about) and use [bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel) [framework](https://www.mindstick.com/forum/34615/software-framework-vs-library) for [design](https://www.mindstick.com/articles/12279/interior-design-and-furniture-store-wordpress-theme) part.

I’m design bootstrap menu where use [dropdown list](https://www.mindstick.com/forum/760/dropdown-list-open-hide-behind-another-dropdown-list-on-ie-7) for sub menu when [click](https://www.mindstick.com/articles/12423/social-login-magento-2-one-click-to-register-social) on menu then open sub menu but I’m want to open menu on hover.

**This is my code**

```
<nav class="navbar navbar-default" role="navigation">            <div class="navbar-header">                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">                    <span class="sr-only">Toggle navigation</span>                    <span class="icon-bar"></span>                    <span class="icon-bar"></span>                    <span class="icon-bar"></span>                </button>                <a class="navbar-brand" href="#">Brand</a>            </div>            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">                <ul class="nav navbar-nav">                    <li class="active"><a href="#">Link</a></li>                    <li><a href="#">Link</a></li>                    <li class="dropdown">                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>                        <ul class="dropdown-menu">                            <li><a href="#">Action</a></li>                            <li><a href="#">Another action</a></li>                            <li><a href="#">Something else here</a></li>                            <li class="divider"></li>                            <li><a href="#">Separated link</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">                    <div class="form-group">                        <input type="text" class="form-control" placeholder="Search">                    </div>                    <button type="submit" class="btn btn-default">Submit</button>                </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">Dropdown <b class="caret"></b></a>                        <ul class="dropdown-menu">                            <li><a href="#">Action</a></li>                            <li><a href="#">Another action</a></li>                            <li><a href="#">Something else here</a></li>                            <li class="divider"></li>                            <li><a href="#">Separated link</a></li>                        </ul>                    </li>                </ul>            </div>        </nav>
```

How to possible please solve my [problem](https://yourviews.mindstick.com/view/81399/tackling-the-problem-of-unemployment-during-corona-pandemic)

Thanks in [Advance](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams)

## Replies

### Reply by Anonymous User

You can use this code

## CSS:

```
.caret-up {        width: 0;        height: 0;        border-left: 4px solid rgba(0, 0, 0, 0);        border-right: 4px solid rgba(0, 0, 0, 0);        border-bottom: 4px solid;        display: inline-block;        margin-left: 2px;        vertical-align: middle;    }
```

## Javascript:

```
$(function () {        $(".dropdown").hover(                function () {                    $('.dropdown-menu', this).stop(true, true).fadeIn("fast");                    $(this).toggleClass('open');                    $('b', this).toggleClass("caret caret-up");                },                function () {                    $('.dropdown-menu', this).stop(true, true).fadeOut("fast");                    $(this).toggleClass('open');                    $('b', this).toggleClass("caret caret-up");                });    });
```


---

Original Source: https://www.mindstick.com/forum/12999/how-to-open-bootstrap-dropdown-list-on-hover

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.