Hi all,

I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear.

You can find the page here:
http://www.perceptes.com/topdog/

The CSS and JS (uses jQuery) can be found here:
http://www.perceptes.com/topdog/css/screen.css
http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment)
http://www.perceptes.com/topdog/js/tdps.js
http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment)

For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look.

Thanks very much in advance!

I'm looking at the js for IE quickly and think the problem might be that it's only calling one level deep to run the hover function.

#cattree > ul > li.parent > a

I would think for the next level of the menu it would need to be

#cattree > ul > li.parent > ul > li > a

Again I'm only looking quickly, but that seems to me where the problem is.

That part is used to change the arrow graphic for the top level list, so it's as it should be. The code that's supposed to make the next level appear is this:

    $("#cattree li").hover(function() {
        $(this).children("ul").css("display", "block");
    }, function() {
        $(this).children("ul").css("display", "none");
    })

But again, only a single level of submenus work. Thanks for your reply, though. Much appreciated!

My bad. Though I still think the issue is similar in that the code you posted is only looking one level deep. I haven't looked into jQuery as much as I should, but I'm thinking the code is only looking as far as:

#cattree li

when it needs to look at

#cattree li li or #cattree li ul li

to grab the second level. This is a bit of a guess, but what if you tried copying that block of code and just add the extra li

$("#cattree li li").hover(function() or $("#cattree li ul li").hover(function()

That didn't seem to be it either. I removed all the child selectors from all the CSS files just to test but still only one level appears. I'm thinking it's some IE-specific display bug because the developer toolbar that comes with Internet Explorer Collection shows the hidden UL as changing from display: none to display: block when its parent LI is hovered, as it should. It just doesn't actually appear. Thanks again for your help.

Strange that the developer toolbar shows the display changing. This won't be quite the solution you're looking for, but I've always found the suckerfish menu to work well across browsers.

The jQuery you're using is basically trying the same concept. Adding a class through JavaScript to make up for IE's lack of :hover support on the li.

Sorry I haven't been able to help more.