Question

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.

Answer 1

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.