forum

Home / DeveloperSection / Forums / How to Open Bootstrap dropdown list on hover?

How to Open Bootstrap dropdown list on hover?

Anonymous User274405-Mar-2015

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


Updated on 05-Mar-2015
I am a content writter !

Can you answer this question?


Answer

1 Answers

Liked By