Why are you absolute positioning the DIV... and the outer UL. <enus are usually a flow item, why are you APo'ing them? Only thing that should be getting aPo is the dropdowns.
You're using the display:none method of hiding it, which has accessibiltity issues as screen readers like JAWS won't let users get at them. I'd probably swap that out for overflow:hidden on the LI. Crazy as it sounds it works perfect. It doesn't have the accessibiltiy failings of display:none, and isn't as complicated/buggy as the "left:-999em" method.
The biggest problem is the lack of gaps means a lot of floats... the outermost container I would therein just float and set to 100% width (since you can't set float wrapping with overflow as it would break the menu.) -- again, no clue why you are absolute positioning the wrapper, unless you're doing something silly like absolute positioning the entire layout for no reason.
Oh, on 'custom buttons' you have your </a> and </li> reversed. I didn't even notice until I was testing in IE7.
/* assumes a reset is in use */
#navBar {
/*
I chose to float this at full width so floats are wrapped. We can't
use overflow as that would stop the dropdowns from working.
*/
float:left;
width:100%;
background:#000;
}
#navBar ul {
list-style:none;
float:left;
display:inline; /* prevent IE margin doubling */
padding-left:10%;
text-align:center;
line-height:1.5em; /* just to be sure */
}
#navBar li {
position:relative;
float:left;
overflow:hidden; /* hide dropdown */
zoom:1; /* trip haslayout, fix legacy IE oddities */
}
#navBar li a {
padding:0.25em 1em;
float:left;
text-decoration:none;
color:#000;
background:#FFC;
border:2px solid #000;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#navBar li ul {
position:absolute;
top:2em; /* == inner height of parent anchor, line-height + padding */
left:50%;
width:12em;
margin-left:-6em; /* == negative half the width */
padding:4px 0 0 0;
/* top padding == top + bottom border width of the anchors */
}
#navBar li li {
width:100%;
/*
we have to leave this floated and display:inline or IE7
will make MASSIVE gaps between the LI
*/
}
#navBar li li a {
float:none;
display:block;
}
#navBar li li a {
padding:0.25em 0.5em;
}
#navBar li:hover {
overflow:visible;
}
#navBar li:hover a {
background:#FFF;
}
#navBar li:hover li a {
background:#FFC;
}
#navBar li li:hover a {
background:#FFF;
}
I use a lot of re-declarations (see the three background-color hover sections) because the child-selector ">" isn't available on legacy IE. You throw a .htc file at it like Peterned's whatever :hover and you can have the menu work all the way back to IE 5.5 windows or 5.2 Mac.
I put a working demo up on my server here:
http://www.cutcodedown.com/for_others/ShamanS08/template.html
As with all my examples the directory:
http://www.cutcodedown.com/for_others/ShamanS08/
... is wide open for easy access to the gooey bits and pieces. Also it's been tested working perfect in 6, 7, 8, 9, 10 and 11, Real Opera (12.17) and Chropera Next, and latest each of Firefox, Safari and Chrome... and it's been tested in IE 5.5 which only has a problem with the 'padding' thing being a bit off. Naturally legacy IE doesn't have rounded corners either, oh noes, not that...
I switched the fonts and padding to all EM based, so it properly dynamically scales... this could have been a problem with the top position with the PX border, but if you pad the top of the child UL equal to the border width (top and bottom) we can mix metrics. It's actually nice doing it that way as there's then a few PX of overlap with the dropdown UL, preventing IE positioning bugs from making the menu hard to use.
Hope this helps.