css dropdown menu and javascript

Question

I have this html structure used for a dropdown menu :

<ul>
    <li><ul>...</ul></li>
    <li>...</li>
</ul>

and the css:

li ul {display : none;}
li:hover ul {display : block;}

(this is base structure only).

When I select an item from the menu I'm loading something with ajax and I would like to close the opened submenu.

I've tried with jquery to hide the parent of the clicked element ("li" is the clicked element and "ul" is the parent), the element hides but it does not appear again at mouseover on it's parent. (because the li:hover ul css rule has changed).

Any sugestions about how I could handle this situation?

Guffa · Accepted Answer · 2012-03-06 15:00:33Z

2

The reason that it doesn't work is that you hide the element by setting the style on the element itself, and that has higher priority than the style sheet.

Use a class instead of the hover: pseudo-class:

li ul {display : none;}
li.active ul {display : block;}

Set the class on the element when you hover the submenu:

$('ul li').hover(function() {
  $(this).addClass('active');
}, function() {
  $(this).removeClass('active');
});

Now you can remove the class from the element whenever you want, and it will not screw up the hover.

answered Mar 6, 2012 at 15:00

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marius Ilie · Accepted Answer · 2012-03-06 15:32:48Z

1

so if you're using javascript after all, you could make the following changes to the css:

li.hover ul {display : block;}

and the javascript:

$("ul li").hover(function(){ 
  $(this).addClass("hover"); 
}, function(){ 
  $(this).removeClass("hover"); 
});

edited Mar 6, 2012 at 15:32

answered Mar 6, 2012 at 14:56

Marius Ilie

3,3232 gold badges27 silver badges27 bronze badges

Comments

tschoffelen · Accepted Answer · 2012-03-06 14:58:42Z

0

Best way to solve this is by using Javascript to create the hover effect instead of CSS. This way you can hide the element every moment you want.

So, instead of li:hover ul {display : block;}, use:

$('li').each(function(){
   $(this).bind('mouseover',function(){
      $(this).find('ul').show();
   });
   $(this).bind('mouseout',function(){
      $(this).find('ul').hide();
   });
});

answered Mar 6, 2012 at 14:58

tschoffelen

5207 silver badges23 bronze badges

Comments

Yorgo · Accepted Answer · 2012-03-06 15:00:53Z

0

try that menu that i created a couple min ago:

http://jsfiddle.net/aL7Xe/40/

answered Mar 6, 2012 at 15:00

Yorgo

2,6781 gold badge17 silver badges25 bronze badges

Collectives™ on Stack Overflow

css dropdown menu and javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related