Negar Negaru Negar Negaru - 2 months ago 11
CSS Question

hide drop down menu after clicking doesn't show it after rehover

my menu items don't redirect to another page, so after clicking them they don't hide. I can hide them using javascript or jquery, but they hide forever. I've tried every single suggestion out there but none of them work for me. this is my html:

<nav>
<ul>
<li class="windows"><a href="#">Windows</a>
<ul>
<li><a href="#" class="tile">Tile</a></li>
<li><a href="#" class="closeAll">Close all</a></li>
</ul>
</li>
</ul>
</nav>


my css:

nav ul ul {
display: none;
position: absolute;
top: 100%;
z-index: 1003;
}

nav ul li:hover > ul {
display: block;
height: auto;
}


and my javascript for tile:

tileObject = $('a.tile');
tileObject.click(function () {
$('.windows ul').hide();
tileAction();
});

Answer

If you hide your menu using $('.windows ul').hide(); you will need to do a $('.windows ul').show();(or smething equivalent) to display it again.

As $('.windows ul') will be hidden. You will need do bind the event to another element, for example

$('li.windows').click(function(){
    $('.windows ul').show()
});`

--EDIT--

For that effect you don't need javascript. Check the fiddle. Just use the selector :hover. Then, if you want to do some actions using JS, just use the hover event. Take a look to the docs

--EDIT 2--

I got it now. Check this. You need to unbind the hover event just before hide the element. Then after you hide the element you bind it again.