0

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

谢谢

4

1 回答 1

0

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

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

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

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

于 2013-09-10T13:46:24.110 回答