[Javascript] IE suckerfish menus

[Bill Moseley]

I'm not sure if this is a CSS or Javascript problem, but I'm playing
with a suckerfish menu which requires javascript to make work in IE
because hover is not supported on <li> elements.

    http://hank.org:7123/index.html

    http://hank.org:7123/js/common.js

The structure of the menu is:

    <ul>
        <li class="popup">Top menu item
            <div>
                <ul>
                    <li>sub menu item 1</li>
                    <li>sub menu item 2</li>
                </ul>
            </div>
        </li>

        <li>Top menu item 2
            ....
        </li>
    </ul>

The <div> is used to create a larger "landing" area and to allow me to
position the nested <ul> lower without creating a space between the two
lists.

I use javascript to add a class 'hover' to the <li class="popup">
onmouseover which the css then displays.

If you look in Firefox at one of the drop down menus you can see the
outer <div> in the dotted red line.

But in IE when I move the mouse over the menus mouse out events are
triggered, which closes the menu.

I can make it work by adding a background color to the <div>, but obviously
that's not what I want.  I'm not sure why that fixes it.  I tried
background-color: transparent on the <div> but no luck.  I also tried
adding a z-index to the drop down.

Can someone explain what's happening here?


Thanks,


-- 
Bill Moseley
moseley at hank.org