Pure CSS drop down menu issue in IE 6 and 7

Question

Hey Guys, I've seen a few hints on StackOverflow but cant really see a solution to my specific problem.

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

/* MENU */
ul { font-family:Verdana, Geneva, sans-serif, Arial, Helvetica, sans-serif; font-size: 11px; font-weight:bold; margin:0; padding:0; list-style: none; float:right;}
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:#cc0000; border-top:1px solid #ededed; padding:8px 15px 8px 15px; background:#ededed; margin-left:1px; white-space:nowrap; text-transform:uppercase;}
ul li a:hover { background:#cc0000; color:#fff;}
li:hover ul { display:block; position:absolute; border-right:0px;}
li:hover li { float:none; font-size:11px; border-right:0px;}
li:hover a { background:#444; color:#fff; border-top:1px solid #555; border-right:0px; text-align:left; }
li:hover li a:hover { background:#dedede; color:#cc0000; border-right:0px;}

Any help will be appreciated. Thanks in advance.

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

Hi. 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.