The menu below works just fine in Firefox and Chrome, but in IE9, but hitbox for the "HOME" anchor is being covered partially by the list item behind it except for the actual test, and a single horizontal pixel line at the top and bottom of the button.
Can anyone see what I'm missing?
Code to follow:
index.html
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Navigation</title>
<style>
.menu-container {
width:960px;
height:45px;
margin:0 auto;
position:relative;
z-index:2;
background-color: #3d3d3d;
margin-bottom: 20px;
}
.menu-navigation {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
list-style:none;
padding:0;
margin:0;
text-align: right;
font-size: 0; /* Removes whitespace between <li> */
}
.menu-navigation > li {
display:inline;
margin:0;
border-left:solid 1px #242424;
background-color:transparent;
font-size: 12px;
padding: 15px 0 15px 0;
}
.menu-navigation > li:hover, .menu-navigation > li.current-menu-item {
background-color:#202020;
}
.menu-navigation > li.active,
.menu-navigation > li.active:hover {
background-color:#131313;
}
.menu-navigation > li a {
text-decoration:none;
color:#bbbbbb;
}
.menu-navigation > li a:hover {
color:#efefef;
}
.menu-navigation > li span a {
color:#ffffff;
}
.menu-navigation > li a:focus {
outline:none;
}
.menu-navigation > li.menu-item-parent > span,
.menu-navigation > li > span > a {
text-transform:uppercase;
outline:0;
text-decoration:none;
color:#ffffff;
text-shadow:1px 1px 1px #000000;
line-height: 45px;
display: inline-block;
height: 45px;
padding: 0 20px 0 20px;
}
.menu-navigation > li.menu-item-parent > span {
background:url("../img/down.png") no-repeat right center;
}
.menu-navigation > li.menu-item-parent > span:hover,
.menu-navigation > li > span > a:hover {
cursor:pointer;
}
</style>
</head>
<body>
<div class="menu-container">
<ul class="menu-navigation">
<li><span><a href="#">This is a link</a></span></li>
<li><span><a href="#">This is a link</a></span></li>
<li class="menu-item-parent"><span>Not a link</span></li>
<li class="menu-item-parent"><span>Not a link</span></li>
<li class="menu-item-parent"><span>Not a link</span></li>
</ul>
</div>
</body>
</html>
EDIT:
Alright, I've changed the code to isolate the issue, and narrowed down the problem CSS. Simply adding a background image fixes the issue.
The code is set up so it styles so the hit boxes for all the menu items are the same regardless if there's a link in them or not to facilitate an "onClick" drop down on those menu items without anchors.
Refer to lines 81 - 86. Remove those lines (just a background image), and the hit box issue is seen in the menu items "NOT A LINK" as well. Further, the act of adding a background image fixes the hit box issue of "THIS IS A LINK" menu items. Simply add the following snippet to the CSS:
.menu-navigation > li > span > a {
background:url("../img/down.png") no-repeat right center;
}
Adding a background image, even if there is no actual image, is changing something with regards to the hit box... I'm just not sure what...
