Negar Negaru Negar Negaru - 18 days ago 7
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.