How to Open Bootstrap dropdown list on hover?

Here I’m working on a web application and use bootstrap framework for design part.

I’m design bootstrap menu where use dropdown list for sub menu when click on menu then open sub menu but I’m want to open menu on hover.

This is my code

<navclass="navbar navbar-default"role="navigation">
            <divclass="navbar-header">
                <buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1">
                    <spanclass="sr-only">Toggle navigation</span>
                    <spanclass="icon-bar"></span>
                    <spanclass="icon-bar"></span>
                    <spanclass="icon-bar"></span>
                </button>
                <aclass="navbar-brand"href="#">Brand</a>
            </div>
            <divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1">
                <ulclass="nav navbar-nav">
                    <liclass="active"><ahref="#">Link</a></li>
                    <li><ahref="#">Link</a></li>
                    <liclass="dropdown">
                        <ahref="#"class="dropdown-toggle"data-toggle="dropdown">Dropdown <bclass="caret"></b></a>
                        <ulclass="dropdown-menu">
                            <li><ahref="#">Action</a></li>
                            <li><ahref="#">Another action</a></li>
                            <li><ahref="#">Something else here</a></li>
                            <liclass="divider"></li>
                            <li><ahref="#">Separated link</a></li>
                            <liclass="divider"></li>
                            <li><ahref="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <formclass="navbar-form navbar-left"role="search">
                    <divclass="form-group">
                        <inputtype="text"class="form-control"placeholder="Search">
                    </div>
                    <buttontype="submit"class="btn btn-default">Submit</button>
                </form>
                <ulclass="nav navbar-nav navbar-right">
                    <li><ahref="#">Link</a></li>
                    <liclass="dropdown">
                        <ahref="#"class="dropdown-toggle"data-toggle="dropdown">Dropdown <bclass="caret"></b></a>
                        <ulclass="dropdown-menu">
                            <li><ahref="#">Action</a></li>
                            <li><ahref="#">Another action</a></li>
                            <li><ahref="#">Something else here</a></li>
                            <liclass="divider"></li>
                            <li><ahref="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>

How to possible please solve my problem

Thanks in Advance

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

$(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");
                });
    });

forum

How to Open Bootstrap dropdown list on hover?

Anonymous User

1 Answers

Liked By