Pure CSS drop down menu issue in IE 6 and 7

I have a pure css menu with dropdowns, in IE8 and FF it works great, but compatibility mode for IE7 and IE6 it doesnt work.

The thing is, it does drop down - but then when the mouse goes over the main website banner below, which has a massive image in it, the drop menu disappears...

I do not want to drop links here, so, you can probably find the site from my profile.

But here is some code. Menu first up.

<ul id="menu">
<li><a href="***.php" title="Unihost Web Hosting Home Page">Home</a></li>
<li><a href="#">Company</a>
<ul>
<li><a href="***.php" title="About Unihost">About us</a></li>
<li><a href="***.php" title="We're going green, are you?">Going Green</a></li>
<li><a href="***.php" title="Unihost Privacy Policy">Privacy policy</a></li>

<li><a href="***.php" title="Unihost Terms and Conditions">Terms and conditions</a></li>    
</ul>
</开发者_如何学运维li>
<li><a href="">Products</a>
<ul>
<li><a href="***.php" title="Register a domain with us" target="_blank">Domain Registrations</a></li>    
<li><a href="***.php" title="PHP Web hosting packages">PHP Web Hosting Packages</a></li>
<li><a href="***.php" title="Our E-mail hosting packages">Email Hosting Packages</a></li>

</ul>
</li>
<li><a href="">Contact us</a>
<ul>
<li><a href="***.php" title="Contact support" target="_blank">Support</a></li>
<li><a href="***.php" title="Pre-sales Questions" target="_blank">Pre-sales Questions</a></li>
</ul>

</li>
<li><a href="">Client Area</a>
<ul>
<li><a href="***.php" target="_blank">Register</a></li>
<li><a href="***.php " target="_blank">Login</a></li>
<li><a href="***" target="_blank">Client Area</a></li>
<li><a href="***" target="_blank">Knowledgebase</a></li>

<li><a href="***" target="_blank">Help Ticket System</a></li>
</ul>
</li>  
</ul>

Css Second up

ul {
font-family:Verdana, Geneva, sans-serif, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:700;
list-style:none;
float:right;
margin:0;
padding:0;
}

ul li {
display:block;
position:relative;
float:left;
border-right:1px solid #ccc;
}

li ul {
display:none;
}

ul li a {
display:block;
text-decoration:none;
color:#c00;
border-top:1px solid #ededed;
background:#ededed;
margin-left:1px;
white-space:nowrap;
text-transform:uppercase;
padding:8px 15px;
}

ul li a:hover {
background:#c00;
color:#fff;
}

li:hover ul {
display:block;
position:absolute;
border-right:0;
}

li:hover li {
float:none;
font-size:11px;
border-right:0;
}

li:hover a {
background:#444;
color:#fff;
border-top:1px solid #555;
border-right:0;
text-align:left;
}

li:hover li a:hover {
background:#dedede;
color:#c00;
border-right:0;
}

Any help will be appreciated. Thanks in advance.

Pure CSS menus have a number of problems, not least the diagonal problem. I'd suggest switching to Javascript - this should solve the browser compatibility problem and make the menu more usable.

If you are using jQuery I recommend Superfish.

As far as I know, you will have to resort to javascript for your menu to work in IE6. I had written an article on instantshift you might want to have a look at:

• Create Simple Dropdown Menu Using jQuery

You have a couple of options for getting the menu to work in IE6. It sounds like you're using compatibility mode in IE8 to test - this is definitely not analogous to actually using IE6 to look at the site.

As far as getting a pure CSS dropdown to work in IE6 goes, the simple answer is: you can't, because IE6 doesn't recognise the :hover pseudo-class on anything other than an <a>.

IE7.js is a fantastic JS library that corrects CSS bugs and adds unsupported features to older versions of IE, it's well worth a look.

You could also do your bit for encouraging your users to upgrade by implementing Pushup, which you can find at pushuptheweb.com (sorry, can only post 1 link).

To be honest, you really should do as the other poster suggested and strip the tables out of your markup. That's a very outdated layout technique which could be replaced with a very small amount of semantic HTML and CSS.

First thing, IE6 is dead, IE6 Funeral

Second, for IE7 you may have to put z-index in you ul and wrap your image with div and put z-index on it. The z-index of ul should be higher than the z-index of the div that you wrap with your image.