2

I have the next menu:

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle"><img src="img/ico_menu_off.png" /></a>
            <ul class="dropdown-menu">
                <li><a href="#">Links to Portals <span class="caret"></span></a></li>
                <li><a href="#">Links to Calculators <span class="caret"></span></a></li>
                <li><a href="#">Links to Tools <span class="caret"></span></a></li>
            </ul>
        </li>
        <li><a href="#"><img src="img/u2973.png" /></a></li>
        <li><a href="#"><img src="img/u2983.png" /></a></li>        
    </ul>      
</div>

When i do click about link "Links to Portals" i want to open a submenu vertical, like the image:

enter image description here

How could do it?

Thank you very much.

Eladerezador
  • 1,277
  • 7
  • 25
  • 48
  • Where's your JavaScript? Can we see a pen? You're likely not loading the JavaScript correctly. – Tania Rascia Dec 15 '15 at 15:32
  • 1
    Possible duplicate of [Bootstrap 3 dropdown sub menu missing](http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing) – blas3nik Dec 15 '15 at 15:37

1 Answers1

4

I have created a solution for Hover event

Your HTML code should be like this

 <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle"><img src="img/ico_menu_off.png" /></a>
            <ul class="dropdown-menu">
                <li><a href="#">Links to Portals <span class="caret"></span></a>
                   <ul class="dropdown-menu sub-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a>Nav header</a></li>
            <li><a href="#">One more separated link</a></li>
        </ul>
                </li>
                <li><a href="#">Links to Calculators <span class="caret"></span></a></li>
                <li><a href="#">Links to Tools <span class="caret"></span></a></li>
            </ul>
        </li>
        <li><a href="#"><img src="img/u2973.png" /></a></li>
        <li><a href="#"><img src="img/u2983.png" /></a></li>        
    </ul>      
</div

and put following code in your CSS file

.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;
}
Sumit Kumar
  • 394
  • 2
  • 20