Bootstrap Horizo​​ntal下拉菜单

Question

我正在尝试使用像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/ 任何帮助都会很棒。

由于

Answer 1

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

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

这是您的代码的编辑版本，但显然您必须设置它的样式，以便没有间隙导致鼠标超出<li>项目。

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