• support@answerspoint.com

How to Create Bootstrap menu dropdown on hover not on click.

520

I Create a Bootstrap dropdown menu that's working on click the menu title, I want to Bootstrap menu automatically dropdown on hover, But I have no idea.

1Answer


0

This is the pure on hover dropdown menu based on the latest Bootstrap framework that has support for multiple submenus.

HTML CODE:- 

<body>
<section>
	<div class="container">
    	<div class="row">
            <ul class="nav nav-pills">
                <li class="active"><a href="#">Active Menu</a></li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown Menu <b class="caret"></b></a>
                    <ul class="dropdown-menu" id="menu1">
                        <li>
                            <a href="#">Sub Dropdown Menu <i class="icon-arrow-right"></i></a>
                            <ul class="dropdown-menu sub-menu">
                                <li><a href="#">My Menu 1</a></li>
                                <li><a href="#">My Menu 2</a></li>
                                <li><a href="#">My Menu 3</a></li>
                                <li class="divider"></li>
                                <li class="nav-header">Menu Header</li>
                                <li><a href="#">My Menu 1</a></li>
                                <li><a href="#">My Menu 2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Dropdown Menu</a></li>
                        <li><a href="#">Dropdown Menu</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="#">Menu</a></li>
                <li class="dropdown"><a href="#">Menu</a></li>
            </ul>
        </div>
    </div>
</section>

 

CSS CODE:- 

body {
  padding:100px;
}

.sidebar-nav {
  padding: 9px 0;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top:1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

 

  • answered 1 year ago
  • Community  wiki

Your Answer

    Facebook Share