I have the following page:
http://bit.ly/9FsY1Q

And have added a jQuery dropdown menu to the main navigation.

It works fine in everything except IE6 and 7 (how shocking), as the dropdown menu displays under the wrong tab.

It's supposed to appear underneath the link that says 'HOW IT WORKS' but in IE it opens under the tab next to it; 'VALUE FOR MONEY'.

I've had this problem in the past and have in fact managed to fix it, but that was a long time ago and I've completely forgotten how to do it!!

Here is the CSS for the menu:

#nav {
    float: left;
    width: 912px;
    background: url('../image/nav.gif') no-repeat;
    margin: 10px 0 20px;
    padding-left: 28px;
}

#nav li {
    display: inline;
    background: url('../image/nav-li.gif') no-repeat 100% center;
    float: left;
}

#nav li a {
    float: left;
    padding: 14px 5px 15px;
    color: #FFF;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    margin-right: 5px;
}

#nav li ul {
    position: absolute;
    width: 140px;
    background: url('../image/nav-li-ul.png') no-repeat 0 100%;
    float: none;
    z-index: 1;
    margin-top: 40px;
    padding: 5px 0;
    visibility: hidden;
}

#nav li ul li {
    display: inline;
    background: none;
    float: left;
}

#nav li ul li a {
    float: none;
    display: block;
    font-size: 11px;
    width: 130px;
    text-align: left;
    padding: 5px 5px 5px 10px;
}

#nav .last {
    background: none;
}

Thanks to anyone who may be able to help

The problem is with positioning, which IE7 and below all have a problem with. You are going to have to use conditional comments and separate css files for IE6 and once for IE7 in order to fix it's problems.

In IE6, if you're using the :hover pseudo class on anything other than the <a> tag, you're also going to need the whatever:hover behavior to make that work.

I see! But if I set the positioning for IE6 and 7 like so:

left:10px;

Then won't it just move the list to 10px from the left of the side of the browser window?

I tried setting the <li> elements as relative so I could fix it in this way, but things got a bit messy

By positioning I meant position:absolute or position:relative along with z-index. IE6 and 7 both have problems with the 'stacking order' of positioned elements.

Hacking for IE6/7 is too much costly. You will lose time and patience, while trying to please IE. It is better to find a jquery plugin which supports all the browsers. Try Superfish menus.

Originally Posted by vivekar

Hacking for IE6/7 is too much costly. You will lose time and patience, while trying to please IE. It is better to find a jquery plugin which supports all the browsers. Try Superfish menus.

Cool I'll check it out!

Hacking for IE6/7 is too much costly.

First of all, conditional comments is not 'hacking'.
Secondly, if you LEARN what the problems are, they are not all that difficult to solve.

Lastly, I'm of a mind that I just don't support anything except basic plain text for IE6 anymore. Upgrades are FREE, that thing is nearly 10 years old and the sooner we designers stop supporting it, the sooner it will DIE completely!

Originally Posted by LadynRed

and the sooner we designers stop supporting it, the sooner it will DIE completely!

I like the sound of that