CSS menu ul ul li drop down menu not working in i.e 7 or 6 please help

Question

I'm having issues with my drop down menu on ie 6/7 where it is dropping down behind other divs on my site:

http://www.bankruptcy.co.uk/

I have fixed it in other browsers by using zindex.

Any help will be great thanks.

Here is the menu code.

// i cannot post the HTML becuase it has too many links in it.

And here is the CSS.

/* JS disabled styles */
nav li:hover ul { display:block; }

/* base nav styles */
nav {
    display:block;
    margin:0;
    position:relative;
    background-color:#1D1AB2;
    border-top-width: 1px;
    border-bottom-width: 3px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #222;
    border-bottom-color: #222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height: 35px;
}
nav ul {
    padding:0;
    margin:0;
    background-color: #1D1AB2;
}
nav li { position:relative; float:left; list-style-type:none;   z-index: 199;
}
.li80 {
    position:relative;
    float:left;
    width: 80px;
}
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
nav li a {
    display:block;
    padding:10px 17px;
    border-left:1px solid #999;
    color:#FFFFFF;
    text-decoration:none;
    font-weight: bold;
}
nav li a:hover {
    color:#036;
    background-color: #FFD073;
}
nav li a:focus { outline:none; text-decoration:underline; }

/* base nav styles */
nav li:first-child a { border-left:none; }
nav li.last a { border-right:none; }
nav a span { display:block; float:right; margin-left:5px; }
nav ul ul {
    display:none;
    width:100%;
    position:absolute;
    left:0;
    background:#3333cc;
    z-index: 99;
}
nav ul ul li { float:none; }
nav ul ul a {
    padding:5px 10px;
    border-left:none;
    border-right:none;
    font-size:12px;
}

Answer 1

You can't use hover on li element in IE 6.

There's some javascript resource below, that allows you to do that. Here's link.. include this script before css link and everything will be ok ;)

http://ipkhakadze.com/resources/js/menu.htc

Answer 2

CSS :after property isn't recognized in IE6/7. I'm afraid you need to figure out an other solution for that.

Answer 3

I see you already have the "hover on other elements" working, so try this

remove position: relative from

nav li { 
   position:relative; float:left; list-style-type:none;   z-index: 199;
}

and add a new rule below it:

nav li:hover {
 position: relative;
}

does that help?