I’m trying to figure out why on earth z-index is not being applied in Firefox correctly.
I’ve made a tester copy too help see the bug more clearly, hover over “services” in firefox then hover over it again in any other browser (except ie6 since it does not support :hover on anything other than ‘a’ elements) and you’ll see the issue at hand
Tester Code, simply copy and paste and it will show you the issue. Don’t mind the background images as they are not needed to see the bug
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tester Copy</title>
<style type="text/css">
html {
font-family:Arial, Helvetica, sans-serif;
}
body {
margin-top:10px;
}
p {
margin-bottom:15px;
}
div#wrapper {
width:760px;
margin:0px auto;
position:relative;
}
div#block-top-middle {
width:100%;
height:auto;
float:left;
margin:4px 0px 0px 0px;
}
div#block-top-middle div.content-banner {
float:right;
height:219px;
width:456px;
overflow:hidden;
background:red;
}
/* NAVIGATION */
ul#nav-content-main {
width:300px;
height:210px;
float:left;
overflow:hidden;
background:#b1b1b1;
text-transform:uppercase;
color:#FFFFFF;
}
ul#nav-content-main li {
height:35px;
line-height:35px;
}
ul#nav-content-main li:hover {
background:url(../images/menu-hover1.gif) center;
}
ul#nav-content-main li a {
padding:0px 0px 0px 20px;
color:#FFFFFF;
text-decoration:none;
}
ul#nav-content-main li a:hover {
padding:0px 0px 0px 20px;
}
ul#nav-content-main li ul.subMenu {
display:none;
}
ul#nav-content-main li:hover .subMenu {
display:block;
width:200px;
background:#1e33b0;
height:auto;
position:absolute;
top:150px;
left:300px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="block-top-middle">
<ul id="nav-content-main">
<li id="company"><a href="#">Company</a></li>
<li id="services"> <a href="#">Services</a>
<ul class="subMenu" id="sm1">
<li><a href="#">High Voltage</a></li>
<li><a href="#">Generators</a></li>
<li><a href="#">Switch Boards</a></li>
<li><a href="#">Bus Duct Systems</a></li>
<li><a href="#">Maintenance</a></li>
<li class="last"><a href="#">Automation</a></li>
</ul>
</li>
<li id="employment"><a href="#">Employment</a></li>
<li id="contact"><a href="#">Contact</a></li>
<li id="sitemap"><a href="#">Sitemap</a></li>
<li class="last"><a href="#" class="last">Home</a></li>
</ul>
<div class="content-banner"></div>
</div>
</div>
</body>
</html>
Note: I took out the z-indexes to allow for the demo