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:

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

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'); () {
$('.windows ul').hide();


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

    $('.windows ul').show()


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.