我正在使用bootstrap 3,当用户将鼠标悬停在链接上时,我正在尝试显示水平弹出菜单:
<div class="dropdown">
<a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="md-extension"></span>
</a>
<ul class="dropdown-menu abcdef" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<style>
.abcdef li {
float: left;
}
#dropdownMenu1:hover + ul.dropdown-menu, ul.dropdown-menu:hover, ul.dropdown-menu li:hover {
display: block;
}
</style>
当我将鼠标悬停在链接上时,弹出菜单会水平显示。但是,当我尝试将鼠标悬停在其中一个列表项上时,菜单会消失。我希望菜单保持打开状态,以便用户点击其中一个项目。
我“显示:阻止”用于悬停各种元素的下拉列表,但菜单仍未保持打开状态。
答案 0 :(得分:2)
以下是仅限CSS的解决方案。工作原理:首先将悬停连接到.dropdown
div而不是链接本身,然后使用伪类在链接和下拉菜单之间创建一个不可见的空格。
.dropdown:after {
content: "";
position: absolute;
bottom: -10px;
height: 10px;
width: 100%;
left: 0;
display: block;
}
.dropdown:hover > ul.dropdown-menu {
display: block;
}
答案 1 :(得分:0)
像@sherif说的那样。 Javascript是你的朋友。示例:http://jsfiddle.net/scn9p2gu/2/
HTML:
<div class="dropdown">
<a class="dropdown-toggle " id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="md-extension">hello</span>
</a>
<ul class="dropdown-menu abcdef" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
CSS:
.abcdef li {
float: left;
}
.theclass {
display: block;
}
JS:
$("#dropdownMenu1").hover(
function() {
$("ul.dropdown-menu").addClass("theclass");
$("#dropdownMenu1").addClass("theclass");
setTimeout(function(){
$("ul.dropdown-menu").removeClass("theclass");
$("#dropdownMenu1").removeClass("theclass");
}, 3000);
}
);
答案 2 :(得分:-1)
如果你想要...... DEMO
,你可以使用js来实现这一点{{1}}