Topic: IE hover

I'm working on a redesign of my site, and have tweaked the HTML Dog menu to drop down horizontally rather than vertically. But I don't know enough to adapt the IE Hover javascript, so IE6 doesn't work correctly.

Can someone tell me how to adapt the IE Hover javascript to function correctly?

Thanks in advance.


Re: IE hover

Hi again,

I continue working on this redesign using an HTML Dog drop down menu: Again, this works fine, except that the IE Hover Javascript for IE6 doesn't work right. I'd like to fix that Javascript because that would be the easiest fix -- except that I don't know enough Javascript to fix it. Help would be appreciated, irrespective of the following concern.

Apart from that fix, I have also tried the Peterned fix. That fix can be seen here: This works better in IE6, but two of the menu items (Application and Publications) take on a different width (in IE6) than the others, which causes the drop down section to wrap. Why these two menu items function differently than the other menu items is a mystery to me. (It might help for me to know why this is, then again, I just may not "get it." So, what I really need is a fix.)

Again, thanks in advance.


Re: IE hover

the basic idea is attaching a function to the mouseover and mouseout events on the list items that sets a class on them which does the same thing as the li:hover you already have. there's example code in this article in A List Apart,

Re: IE hover

I'd use whatever:hover. It allows you to apply hover styles to anything you want in IE just as you can in more compliant browsers. The advantage of this behavior is that you can get hover effects on anything rather than just on your dropdown using a javascript solution.

Re: IE hover


I tried the Javascript on A List Apart that you suggested, and it doesn't work. The code is different, but the result is the same -- the menu stacks rather than displays inline.


The whatever:hover is in use: But it isn't working correctly (see my earlier post above).


Re: IE hover

Ho boy! If you have been clicking these links (I am an optimist), you have gotten a 404 error because I put a period at the end of the link. Oops. Try:

I am almost where I want to be on this, but have a weird Javascript problem in IE6.

The problem exists only in IE6, which uses the HTML Dog IE6 hover Javascript -- but it isn't consistent.

In IE6 look at the "Application / Organizational Design" submenu. Something is causing the two words to stack like this


but only in that submenu.

Actually there is another main menu item that has a similar problem:

The "Publications / Books - Marketplace Ministry" menu stacks like this:

Books - Marketplace

which causes the next submenu ("Books - Business") to wrap below that.

What should happen is that each submenu should expand to fill the required menu text with some padding.

The actual problem looks like the ul of the submenu loses width under two of the main menu items, but all of the main menu items have the same layout and CSS (I think).

As you can see, I need some help (be nice!).


Re: IE hover

Okay. FYI, I fixed it by adding a

#nav li.sfhover ul {

to a conditional IE statement.

The site is in test mode at: