:悬停效果之后的下拉菜单

Question

我想在我的下拉菜单中实现以下效果，仅使用 CSS 和 HTML？

基本上，这个想法是当将鼠标移到下拉菜单之外时，它会保持打开状态，直到您在菜单外单击或 X 秒后。是否有可能在没有任何额外的库或技术(除了CSS和HTML(的情况下实现这一目标？

Answer 1

更新：现在问题已经澄清，如果不使用 JavaScript，您正在寻找的行为似乎是不可能的。我确实找到了一个纯CSS可点击下拉菜单的示例，但它不符合您的所有条件。

---在问题澄清之前的原始答案---
你实际上在这里问了两个问题。 您最初没有指定首选技术来实现此目的，因此我使用 jQuery 找到了每个问题的答案。 (这些答案使用 .show(( 和 .hide(( 来显示/隐藏元素 - 但如果您愿意，您也可以使用 .css(( 直接更改 CSS。

下拉菜单保持打开状态，直到单击菜单外
您可以检测到对文档的单击，然后检查直接祖先以查看是否单击了所需的元素。(部分来源：https://stackoverflow.com/a/3028037/561309(

$(document).click(function(event) { 
if($(event.target).closest('#menucontainer').length) {
if($('#menucontainer').is(":hidden")) {
$('#menucontainer').show();
}
}
if(!$(event.target).closest('#menucontainer').length) {
if(!$('#menucontainer').is(":hidden")) {
$('#menucontainer').hide();
}
}        
})

下拉列表保持打开状态，直到经过一定时间您可以使用
setTimeout 函数在一段时间后更改 CSS - 这里的示例是两秒钟。一旦鼠标移回菜单上，.stop 方法应该防止超时执行，但这应该进行测试。(部分来源：https://stackoverflow.com/a/14247096/5365001(

$(document).ready(function(){
$("#menucontainer").click(function(){
$("#menucontainer").toggle());
});
$("#menucontainer").mouseout(function(){
setTimeout(function(){ $("#menucontainer").hide(); },2000);
});
$("#menucontainer").mouseover(function(){
$("#menucontainer").stop(); });
});
});

而且，如果您想将两者结合起来，这应该可以解决问题：

$(document).ready(function(){
$(document).click(function(event) { 
if($(event.target).closest('#menucontainer').length) {
if($('#menucontainer').is(":hidden")) {
$('#menucontainer').show();
}
}
if(!$(event.target).closest('#menucontainer').length) {
if(!$('#menucontainer').is(":hidden")) {
$('#menucontainer').hide();
}
}        
})
$("#menucontainer").mouseout(function(){
setTimeout(function(){ $("#menucontainer").hide(); },2000);
});
$("#menucontainer").mouseover(function(){
$("#menucontainer").stop(); });
});
});