引导水平下拉菜单

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 :悬浮选择器打开css菜单，如：

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

下面是您的代码的编辑版本，但是很明显，您必须对其进行样式化，这样鼠标就不会出现在<li>项之外的空白。

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