twitter-bootstrap - Bootstrap 3 - 带子菜单的导航栏菜单

Question

我有下一个菜单:

<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>

当我单击链接“门户链接”时，我想打开一个垂直子菜单，如图所示:

怎么能做到呢？

非常感谢。

Answer 1

我已经为悬停事件创建了一个解决方案

你的 HTML 代码应该是这样的

 <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

并将以下代码放入您的 CSS 文件中

.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;
}