Question

I’m trying to get a dropdown menu to work in ie6(works in all other browsers).
So far I can get it to open up both (2nd + 3rd tier) submenus at once, but I can’t figure out how to get it to open up the second tier and then wait for me to hover before opening the 3rd tier.

It’s using all css, with ul ul and ul ul ul display:none until they are “discovered” by using this line->

#access ul li:hover > ul {
display: block;
}

this is the jquery I have which makes the 2nd and 3rd tier open at the same time:

jQuery(document).ready( function($) {
$('#access li').mouseover( function() {
    $(this).find('ul').show();
});
$('#access li').mouseleave( function() {
    $(this).find('ul').hide();
});
$('#access li ul').mouseleave( function() {
    $(this).hide();
});
});

How can I make the mousover only open up the second tier until I hover over the corresponding button to open up the 3rd tier.

Thanks in advance!

PS I’ve used several plugins(ie7.js, whatever.hover,csshover, ie6hover etc), but they break other code on the page so I’d like to have a light solution for just the menu.

Answer 1

I think the problem comes from the .find(‘ul’), which is finding all nested lists instead of the child list. Try this instead:

jQuery(document).ready( function($) {
$('#access li').mouseover( function() {
    $(this).children('ul').show();
});
$('#access li').mouseleave( function() {
    $(this).find('ul').hide();
});
$('#access li ul').mouseleave( function() {
    $(this).hide();
});
});