why does chrome display an extra 10 pixels, on the child menus? do they render the position differently, in regards to the parent menu? here is the css:
#nav ul li ul{
display: none;
width: 250px;
opacity: .7;
z-index: 999;
}
#nav ul li:hover ul{
display: block;
background-color: #444444;
padding: 0;
margin: 0;
position: absolute;
top: 20px;
border-top: 19px solid black;
}
see it in action:
Based on what I can see, it looks like Chrome and IE9 are rendering the page appropriately, but Firefox 11 is not. Is this the extra 10 pixels you are referring to?
Personally, I’d drop the
top: 20pxto have Firefox 11 render the sub-menus the same as Chrome and IE9.You have a 19px border on top of your
li:hover ulwhich is not measured into the height of the box adding, essentially, another 19px gap above your subnav. Also around line 80 of your styles.css you’ll see that#nav ulgetspadding:10px 0;it’s being applied to the subnav too. giving it 10px padding above the firstli