Hah, funny people missing that nothing they have said has anything to do with the problem.
-
You aren’t declaring a line-height, and you cannot trust the default line-height. This is why it’s rendering broken here in FF as gecko is a complete retard about what % line-heights mean.
-
You aren’t declaring TOP on your nested UL, so it’s landing pretty much wherever the hell it likes. Combined with the lack of line-height you are getting a gap between the menu and it’s sibling anchor - when you go to move the mouse from the LI/Anchor to the dropdown, you hit the gap, the menu dissapears!
-
You might try adding a reset so you aren’t re-declaring margin:0 padding:0 on every element.
-
It’s absolute, you shouldn’t be having to dick with z-index.
-
You should probably be using that absolute positioning to hide it instead of display:none - since display:none can make screen readers not even see the menu.
-
Didn’t you JUST have another thread with the same basic issues? I believe I wrote up a working example in that one with a rather lengthy explanation.
If you don’t want to make too many changes, strip font-family and font-size for:
font:normal 21px/24px arial,helvetica,sans-serif;
(BTW, Verdana is a MS core font, putting arial before it means it will NEVER cascade down, and don’t forget to include a fallback-family!)
Let’s see, what are you aiming for there, 48px total height? Ok, so change the padding on the anchors to:
padding:12px 15px;
and then for the nested UL’s, set
top:48px;
left:0;
We also have that list-style works just as good as the long form, floated elements are inherently display:block so you don’t need to re-state that on the LI, position:relative on the parent tmenu will likely negate the need to be screwing around with z-index, just ‘right’ on background-position is not recognized by all browsers so you have to say BOTH… I’ll assume “top right” - margins with floats are problematic, so pad the parent LI instead of the anchor…
SO…
/* assumes a CSS reset is in use */
* html body {
behavior: url(csshover3.htc);
}
#tmenu {
position:relative; /* depth sort over later elements */
list-style:none;
font:normal 21px/24px arial,helvetica,sans-serif;
background:url(../images/topmenu/navi_bg.gif);
}
#tmenu li {
position: relative;
float: left;
}
#tmenu li a {
float:left;
text-decoration:none;
padding:11px 15px 12px; /* one less top px due to top border */
white-space: nowrap;
color:#FFF;
background:url(../images/topmenu/spacer.gif) top right no-repeat;
border-top:1px solid #FFF;
}
/*
11px top pad + 12px bottom pad +
24px line-height + 1px border == 48px
so we use top:48px on "li ul" since the
default 'fall into place' position cannot
be trusted
*/
#tmenu li a:hover {
background: #617F8A;
}
#tmenu li ul {
position:absolute;
display:inline; /* IE state 'stick' fix */
top:48px;
left:-999em; /* way off the left side of the screen */
}
#tmenu li:hover ul {
display: block; /* IE state 'stick' fix */
left:0;
}
#tmenu li li {
float: none;
display:inline; /* get these unstyled */
font:normal 13px/15px arial,helvetica,sans-serif;
}
#tmenu li:hover a {
background:#617F8A;
}
#tmenu li li:hover a {
background: #95A9B1;
}
Untested, but should do the job. Be sure you are using the newest csshover3.htc and not one of the old ones.
TWO important lessons here: NEVER trust the default line-height, and NEVER trust the default placement of an absolute positioned item.
BTW - you might want to look into REAL sliding doors techniques so you can get rid of that train wreck of nesting for your rounded corners. Feel free to try out my Eight Corners under one roof since it only needs one image to get the job done and by using sandbags before/after for the top/bottom you don’t have the nesting hell that older outdated technique does.
