Question

这是我的代码的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

JS

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

Answer 1

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

Answer 2

你不需要JS。使用：将鼠标悬停在你的CSS中：

header:hover ul {
    display:block;
}

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

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

2 个答案: