悬停时显示下拉菜单-不起作用

Question

Simple problem: I have a nav menu, it shows sub menus when clicked on the '+' beside menu item. BUT IT SHOULD ALSO show drop down menu when hovered.

I think the problem might be:

a) Am I not targeting the right elements

b) is the toggle approach wrong?

New to javascript so I am not sure what is the issue here.

I believe my script is wrong. not sure what the problem is, please help

 /* NAVIGATION ON CLICK */ // Primary menu drop down (mobile) $(".dropdown-toggle").click(function() { $(this).parent().find(".menu-test-container #primary-menu").toggleClass("toggle-on"); }); // Sub menu drop down $(".dropdown-toggle").click(function() { $(this).parent().find(".sub-menu:first").toggleClass("toggle-on"); }); /* NAVIGATION ON HOVER */ // Sub menu drop down $(".dropdown-toggle").hover(function() { $(this).parent().find(".menu-test-container ul li .sub-menu:first").toggleClass("toggle-on"); }); 

 /* # HEADER */ *, html { margin: 0; font-size: 16px; } .site-header { background-color: black; padding: 1rem; display: flex; justify-content: space-between; align-items: center; } .main-navigation { padding: 2rem; background-color: red; } /*.menu-toggle, .main-navigation ul ul, .main-navigation ul ul ul { display: none; } */ /* Menu styles */ .main-navigation .sub-menu { display: none; } .sub-menu.toggle-on { display: block; } .main-navigation ul, .main-navigation ul ul, .main-navigation ul ul ul { list-style: none; } .main-navigation ul li a { color: #fff; text-decoration: none; } /* First Highrarchy */ .main-navigation ul { display: flex; justify-content: flex-end; align-items: center; } .main-navigation ul li { margin-right: 2rem; } /*.dropdown-toggle:hover { display: block; } */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header id="masthead" class="site-header"> <div class="site-branding"> <div class="site-branding-text"> <p class="site-title"><a href="http://localhost/wordpress/" rel="home">LOGO</a></p> </div> </div> <!-- .site-branding --> <nav id="site-navigation" class="main-navigation"> <button class="dropdown-toggle" aria-expanded="false">Primary Menu</button> <div class="menu-test-container"> <ul id="primary-menu" class="menu" aria-expanded="true"> <li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035"> <a href="http://localhost/wordpress/services/">Services</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076"> <a href="http://localhost/wordpress/asd/">Commercial</a> <button class="dropdown-toggle toggled-on" aria-expanded="true"> <span class="dropdown-symbol">-</span> </button> <ul class="sub-menu toggled-on"> <li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082"> <a href="http://localhost/wordpress/asd/">Rural</a> <button class="dropdown-toggle toggled-on" aria-expanded="true"> <span class="dropdown-symbol">-</span> </button> <ul class="sub-menu toggled-on"> <li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081"> <a href="http://localhost/wordpress/services/">Electrical</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079"> <a href="http://localhost/wordpress/gallery/">Residential</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084"> <a href="http://localhost/wordpress/asd/">Projects</a> </li> <li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045"> <a href="http://localhost/wordpress/blog/">Blog</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078"> <a href="http://localhost/wordpress/news-updates/">About</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099"> <a href="http://localhost/wordpress/news-updates/">News Updates</a> </li> </ul> </li> </ul> </li> </ul> </div> </nav> <!-- #site-navigation --> <link rel="stylesheet" type="text/css" href="style.css"> </header> 

Answer 1

The menu only opens when hovering over the button. Hence, when even hovering over the menu itself, the menu closes. You can add the following

 $(".sub-menu").hover(function() {
  $(this).addClass("toggle-on");
});

$(".sub-menu").mouseleave(function() {
  $(this).removeClass("toggle-on");
});

The menu keeps jumping and causes UI changes since it is not absolute. You may add the following

.sub-menu {
  position: absolute;
  background-color: #000;
  margin-top: -26px;
  margin-left: -38px;
}

Below is an updated snippet.

 /* NAVIGATION ON CLICK */ // Primary menu drop down (mobile) $(".dropdown-toggle").click(function() { $(this).parent().find(".menu-test-container #primary-menu").toggleClass("toggle-on"); }); // Sub menu drop down $(".dropdown-toggle").click(function() { $(this).parent().find(".sub-menu:first").toggleClass("toggle-on"); }); /* NAVIGATION ON HOVER */ // Sub menu drop down $(".dropdown-toggle").hover(function() { $(this).parent().find(".menu-test-container ul li .sub-menu:first").toggleClass("toggle-on"); }); $(".sub-menu").hover(function() { $(this).addClass("toggle-on"); }); $(".sub-menu").mouseleave(function() { $(this).removeClass("toggle-on"); }); 

 /* # HEADER */ *, html { margin: 0; font-size: 16px; } .site-header { background-color: black; padding: 1rem; display: flex; justify-content: space-between; align-items: center; } .main-navigation { padding: 2rem; background-color: red; } /*.menu-toggle, .main-navigation ul ul, .main-navigation ul ul ul { display: none; } */ /* Menu styles */ .main-navigation .sub-menu { display: none; } .sub-menu.toggle-on { display: block; } .main-navigation ul, .main-navigation ul ul, .main-navigation ul ul ul { list-style: none; } .main-navigation ul li a { color: #fff; text-decoration: none; } /* First Highrarchy */ .main-navigation ul { display: flex; justify-content: flex-end; align-items: center; } .main-navigation ul li { margin-right: 2rem; } .sub-menu { position: absolute; background-color: #000; margin-top: -26px; margin-left: -38px; } /*.dropdown-toggle:hover { display: block; } */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header id="masthead" class="site-header"> <div class="site-branding"> <div class="site-branding-text"> <p class="site-title"><a href="http://localhost/wordpress/" rel="home">LOGO</a></p> </div> </div> <!-- .site-branding --> <nav id="site-navigation" class="main-navigation"> <button class="dropdown-toggle" aria-expanded="false">Primary Menu</button> <div class="menu-test-container"> <ul id="primary-menu" class="menu" aria-expanded="true"> <li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035"> <a href="http://localhost/wordpress/services/">Services</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076"> <a href="http://localhost/wordpress/asd/">Commercial</a> <button class="dropdown-toggle toggled-on" aria-expanded="true"> <span class="dropdown-symbol">-</span> </button> <ul class="sub-menu toggled-on"> <li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082"> <a href="http://localhost/wordpress/asd/">Rural</a> <button class="dropdown-toggle toggled-on" aria-expanded="true"> <span class="dropdown-symbol">-</span> </button> <ul class="sub-menu toggled-on"> <li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081"> <a href="http://localhost/wordpress/services/">Electrical</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079"> <a href="http://localhost/wordpress/gallery/">Residential</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084"> <a href="http://localhost/wordpress/asd/">Projects</a> </li> <li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045"> <a href="http://localhost/wordpress/blog/">Blog</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078"> <a href="http://localhost/wordpress/news-updates/">About</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099"> <a href="http://localhost/wordpress/news-updates/">News Updates</a> </li> </ul> </li> </ul> </li> </ul> </div> </nav> <!-- #site-navigation --> <link rel="stylesheet" type="text/css" href="style.css"> </header>