Submenu not showing on hover - jQuery

Question

https://codepen.io/grantsmith/pen/YQweRb

I am trying to get my branded header menu, sub menu to appear upon hover. The code is pretty long, hence the code pen.

I’m targeting any 'a' in the menu that has children, and toggle the .nav-dropdown class.

Perhaps this is wrong way to go about this, open to suggestions. This is bound to be a jQuery issue as I'm pretty new to it.

(function($) {
$(function() {
$('nav ul li > a:not(:only-child)').click(function(e) {
  $(this).siblings('.nav-dropdown').toggle();
  $('.nav-dropdown').not($(this).siblings()).hide();
  e.stopPropagation();
});
$('html').click(function() {
  $('.nav-dropdown').hide();
});
});
document.querySelector('#nav-toggle').addEventListener('click', function() {
this.classList.toggle('active');
});
$('#nav-toggle').click(function() {
$('nav ul').toggle();
});
})(jQuery);

Answer 1

Try this: https://codepen.io/anon/pen/KqVovo

(function($) {
  $(function() {
    $('nav>ul>li').mouseenter(function(e) {
      $(this).children('.nav-dropdown').show();
    });
    $('nav>ul>li').mouseleave(function(e) {
      $('.nav-dropdown').hide();
    });
  });
})(jQuery);