Bootstrap 水平下拉菜单答案

【问题标题】：Bootstrap Horizontal Drop Down menuBootstrap 水平下拉菜单
【发布时间】：2013-09-11 00:00:43
【问题描述】：

我正在尝试像flipkart.com 这样的水平下拉菜单，他们在悬停时有浮动侧边栏菜单。

这是我的尝试 [使用响应式设计]：-

JSFIDDLE 链接 - http://jsfiddle.net/QSFPK/

<div class="row-fluid">
<div class="span12">
<div class="span3">
<ul class="nav nav-tabs nav-stacked">
    <hr style="margin: -1px;">
    <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
        <ul class="dropdown-menu rightMenu">
            <li><a id="logout" href="#">Sign Out</a></li>
        </ul>
    </li>
    <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
        <ul class="dropdown-menu rightMenu">
            <li><a id="logout" href="#">Sign Out</a></li>
        </ul>
    </li>
    <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
        <ul class="dropdown-menu rightMenu">
            <li><a id="logout" href="#">Sign Out</a></li>
        </ul>
    </li>
    <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
        <ul class="dropdown-menu rightMenu">
            <li><a id="logout" href="#">Sign Out</a></li>
        </ul>
    </li>
    <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
        <ul class="dropdown-menu rightMenu">
            <li><a id="logout" href="#">Sign Out</a></li>
        </ul>
    </li>
    <div class="clearFix"></div>
</ul>
</div>
    <div class="span9">
        <h2>Hello World</h2>
        <h2>Hello World</h2>
        <h2>Hello World</h2>
        <h2>Hello World</h2>
        <h2>Hello World</h2>
    </div>
</div>
    </div>

这是我的 CSS :-

.rightMenu {
    position:relative;
    float:right;
}
.right-caret {

    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid #000000;
    display: inline-block;
    height: 0;
    opacity: 1;
    vertical-align: top;
    width: 0;    
}
.right {
    float: right;
}

JSFIDDLE 链接 - http://jsfiddle.net/QSFPK/ 任何帮助都会很棒。

谢谢

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

如果您向具有下拉菜单的列表项添加某种类，则可以使用 css :hover 选择器打开带有 css 的菜单，例如：

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

这是您的代码的编辑版本，但显然您必须对其进行样式设置，以免导致鼠标移出 <li> 项目的间隙。

http://jsfiddle.net/QSFPK/2/

【讨论】：

但我认为，当您将鼠标悬停在下拉按钮 signout 上时，您还没有检查过，整个下拉菜单都会消失。