Make CSS Hover work when the element is hidden using javascript

Question

I have a menu where there are the heading and the submenus. Whenever the user hovers over the heading, submenus show up.

And whenever any of the items in submenus is clicked, the submenu is set to hidden using Javascript. Now, when the user hovers over the menu, the submenus don't show up! Please help me to fix this.

 function closesSan() { document.getElementsByClassName('submenu')[0].style.setProperty('display', 'none', 'important'); } 

 #main:hover .submenu { display: block!important; } 

 <ul> <li id="main"> <a href="javascript:void(0)">List</a> <ul class="submenu" style="display: none;"> <li onclick="closesSan()">Bacon</li> <li onclick="closesSan()">Tuna</li> <li onclick="closesSan()">Chicken</li> </ul> </li> </ul> 

Answer 1

I had to write some additional code to get the desired result. Actually, the base problem in your code was important and property {both works same} in sense both get prioritized by code.

So to get rid of I have added an additional class on click and removing that class on every new hover. Hope it will satisfy the needs.

 var main = document.getElementById("main"); main.onmouseover = function() { document.querySelector('.submenu').classList.remove("displayNoneImp"); } function closesSan() { document.querySelector('.submenu').classList.add("displayNoneImp"); } 

 .submenu { display: none; } #main:hover .submenu { display: block; } .displayNoneImp { display: none !important; } 

 <ul> <li id="main"> <a href="javascript:void(0)">List</a> <ul class="submenu"> <li onclick="closesSan()">Bacon</li> <li onclick="closesSan()">Tuna</li> <li onclick="closesSan()">Chicken</li> </ul> </li> </ul> 

Answer 2

Since you don't use a pure CSS implementation, use event listeners and avoid using !important whenever possible:

 var main = document.querySelector('#main'); var submenu = document.querySelector('.submenu'); var items = document.querySelectorAll('#main li'); main.addEventListener('mouseover', function () { submenu.style.display = 'block'; }); main.addEventListener('mouseout', function () { submenu.style.display = 'none'; }); items.forEach(function(item) { item.addEventListener('click', function () { console.log('clicked on:', item) submenu.style.display = 'none'; }); }); 

 .submenu { display: none; } 

 <ul> <li id="main"> <a href="javascript:void(0)">List</a> <ul class="submenu"> <li>Bacon</li> <li>Tuna</li> <li>Chicken</li> </ul> </li> </ul> 

When Using !important is The Right Choice

Answer 3

You can try something simple like this:

 function closesSan() { document.getElementsByClassName('submenu')[0].classList.add("hide"); setTimeout(function() { document.getElementsByClassName('submenu')[0].classList.remove("hide"); },100) } 

 #main .submenu { display: none; } #main:hover .submenu { display: block; } #main .submenu.hide { display: none; } 

 <ul> <li id="main"> <a href="javascript:void(0)">List</a> <ul class="submenu" > <li onclick="closesSan()" >Bacon</li> <li onclick="closesSan()">Tuna</li> <li onclick="closesSan()">Chicken</li> </ul> </li> </ul> 

Answer 4

use visibility instead of display

visibility: hidden;

save those kittens