如何保持悬停后下拉导航打开？

这是我的代码jsbin link。正如你所看到的，只要我从触发器上悬停，下拉菜单就会关闭，导致导航无效。如何保持悬停后下拉导航打开？

任何简单的解决方案将是非常受欢迎的。提前致谢。

HTML

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
<header> 
    <p>Menu</p> 
    <ul> 
    <li>list</li> 
    <li>list</li> 
    <li>list</li> 
    <li>list</li> 
    </ul> 
</header> 
</body> 
</html>

SASS

* 
    margin: 0 

header 
    padding: 20px 
    background-color: tomato 
    p 
    display: inline 
    padding: 5px 10px 
    background-color: blue 
    color: white 
    &:hover 
     cursor: pointer 
    ul 
    padding: 10px 
    background-color: blue 
    list-style: none 
    color: white 
    width: 60px 
    display: none

$(function(){ 
    $("p").hover(function(){ 
    $("ul").slideToggle(); 
    }); 
});

来源

2015-11-04 Eli Tamosauskas

'mouseenter' /'在格mouseleave' – melancia

包装和使用悬停的DIV http://jsfiddle.net/mohamedyousef1980/wfw1f9to/1/ –

$(function(){ 
    $("p").hover(function(){ 
    $("ul").show();  
    }); 
    $("ul").hover(function(){}, function(){ 
    $(this).hide(); 
    }); 
});

来源

2015-11-04 16:26:25

是但随后它停留在那里，一旦我悬停在盒子外面，我该如何让它消失？ –

@EliTamosauskas我已经更新了答案。你的意思是？ – 2015-11-04 16:36:07

你不需要JS这一点。使用方法：将鼠标悬停在你的CSS：

header:hover ul { 
    display:block; 
}

http://jsfiddle.net/wfw1f9to/3/

来源

2015-11-04 16:29:07 Cruiser

如何保持悬停后下拉导航打开？

回答

相关问题