[jQuery] Superfish woes in IE

[Laker Netman]

I am working on a vertical, AJAX-produced dynamic menu that will has
two levels of flyout sub menus.

So far the menu works as expected in Firefox 3.0.8 and Safari 3.2.2,
both on Windows, but not in IE7. The issue I'm dealing with is that
the sub menus do not appear next to the higher level menu as they
should. Instead the pop up "all over the place". Sorry to be vague,
but there doesn't appear to be any pattern. Some sub menus overlap
with the parent menu, some appear to the right with a wide gap (which
varies from menu choice to menu choice) and vertically the sub menus
start anywhere from the top of the screen to somewhere outside of the
visible area. Some sub menu even have some gaps between groups on the
list. That is choices A, B and C appear together, then a vertical gap
of 50 or 60 pixels, followed by D, E, and F.

Here is the CSS I'm [currently] using:
#nav {
        position: relative;
        margin: 0px;
        padding: 0px;
        top: 126px;
        left: 2px;
        font-size: 10px;
}

/* Vertical menu */
        #nav ul { /* all lists */
                padding: 0px;
                margin: 0px;
                list-style: none;
                width: 148px;
                z-index: 5;
        }

        #nav li { /* all list items */
                border: none;
                position: relative;
                float: left;
                line-height: 27px;
                margin-bottom: -1px;
                width: 143px;
                height: 28px;
        }

        #nav li ul { /* second-level lists */
                position: absolute;
                padding: 0px;
                left: -999em;
                margin-left: 100px;
                margin-top: -50px;
        }

        #nav li ul ul { /* third-and-above-level lists */
                left: -999em;
                margin-top: -20px;
        }

        #nav li a {
                width: 135px;
                w\idth: 135px;
                display: block;
                color: white;
                font-weight: bold;
                text-decoration: none;
                background: url(/images/buttonOff.png);
                padding: 0 0.5em;
        }

        #nav li a:hover {
                color: black;
                background: url(/images/buttonHover.png);
        }

        #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul,
#nav li.sfhover ul ul ul {
                left: -999em;
        }

        #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav
li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /*
lists nested under hovered list items */
                left: auto;
        }

/
*****************************************************************************************************/

And my Jquery call:
        $("ul#nav").superfish({
                animation: {height:'show'},
                dropShadows: false,
                delay:     1200
        });


I have tried a variety of changes to the CSS, however nothing improves
the situation in IE, and just ends up breaking things in Firefox and
Safari.

I'd appreciate any help on this issue. Sorry, I don't have a web-
facing URL available, but I hope my explanation has been clear enough.

Thanks,
Laker