jquery - 使用 jQuery 的下拉菜单

Question

所以我正在尝试使用 jQuery 在网站上为我的顶部导航制作一个下拉菜单，并且我已经设法获得了我想要的设计和功能，但是当我不希望菜单在我悬停时隐藏它，我不确定如何解决这个问题。

https://jsfiddle.net/Lk8cwv5h/1

<nav id="topnav">
  <ul>
    <li><a href="index.htm">Hem</a></li>
    <li class="has-sub"><a href="#">Information &#x25BE;</a>
      <ul class="dropdown">
        <li><a href="#">Om produkterna</a></li>
        <li><a href="#">Om oss</a></li>
        <li><a href="#">Varför detta?</a></li>
      </ul>
    </li>
    <li><a href="handla.htm">Handla</a></li>
  </ul>
</nav>

nav {
    background-color: rgb(100,155,255);
    border: 1px solid rgb(175, 175, 175);
    border-radius: 0 0 1em 1em;
}
nav ul {
    position: relative;
    display: inline-table;
    padding: 0 20px;
}
nav ul:after {
    content: "";
    clear: both;
    display: block;
}
nav ul li {
    display: table-cell;
}
nav ul li a {
    display: block;
    padding: 0.5em 1.5em;
    color: black;
    font-size: 1.4em;
}
nav ul li a:hover{
    text-decoration: none;
}
nav ul li ul li{
    display: block;
}
nav ul li ul li a{
    font-size: 0.857em;
  text-decoration: none;
}
.highlight{
    background-color: rgb(175,175,175);
    border-radius: 0 0 1em 1em;
    opacity: 0.5;
}
.has-sub{
    position: relative;
    display: inline-block;
}
.dropdown{
    background-color: rgb(100,155,255);
    z-index: 100;
    position: absolute;
    text-align: left;
    margin-top: 1em;
    margin-left: 0.8em;
    border: 1px solid rgb(175, 175, 175);
    border-top: none;
    border-radius: 0 0 1em 1em;
}

//Highlight for menu
$("#topnav").on("mouseenter", "li", function(){
    if ($(this).hasClass("has-sub")) {
        return;
    }
    $(this).addClass("highlight");
});
$("#topnav").on("mouseleave", "li", function(){
    if ($(this).hasClass("has-sub")) {
        return;
    }
    $(this).removeClass("highlight");
});

//Dropdown for topnav
$(".dropdown").hide();
$("#topnav").on("mouseenter", ".has-sub", function(){
    $(this).find(".dropdown").show();
});
$("#topnav").on("mouseleave", ".has-sub", function(){
    $(this).find(".dropdown").hide();
});

任何答案表示赞赏，干杯!

Answer 1

正如 C Travel 所说，您可以使用纯 css 将其存档，但如果您想要在 jQuery 中，您可以添加:

  $(".dropdown").on("mouseenter", function(){
        $(this).show();
  });

并更改 .dropdown 的 css 样式

margin-top: 1em;

到

padding-top: 1em; 

它有效