Dropdown-Menü mit jQuery

Question

Also ich versuche, ein Dropdown-Menü für meine Topnav auf der Website mit jQuery zu machen, und ich habe es geschafft, das Design und die Funktionalität, wie ich es will, aber wenn ich nicht wollen, dass das Menü zu verstecken Ich schwebe darüber und ich bin mir nicht sicher, wie ich das beheben soll.

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(); 
}); 

Alle Antworten werden geschätzt, Prost!

Answer 1

Wie gesagt C Reisen Sie dies mit reinem CSS archivieren konnte, aber wenn Sie in jQuery möchten, können Sie hinzufügen:

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

und die CSS-Stil .dropdown ändern von

margin-top: 1em; 

zu

padding-top: 1em; 

Und es funktioniert

Answer 2

prüfen FIDDLE:https://jsfiddle.net/o7jvpxqd/

Dieses JQuery: nur

(function($){ 

     //cache nav 
     var nav = $("#topnav"); 

     //add indicators and hovers to submenu parents 
     nav.find("li").each(function() { 
      if ($(this).find("ul").length > 0) { 



       //show subnav on hover 
       $(this).mouseenter(function() { 
        $(this).find("ul").stop(true, true).slideDown(); 
       }); 

       //hide submenus on exit 
       $(this).mouseleave(function() { 
        $(this).find("ul").stop(true, true).slideUp(); 
       }); 
      } 
     }); 
    })(jQuery);