After seeing a menu like this on one of those "web 2.0" sites, I wanted to see if I could replicate it. I have, and was quite happy with the results. this design has a minimal amount of XHTML coding, with all of the colors and hover attributes being taken care of via CSS. The original design I was trying to duplicate is seen in the image below:
One of the key components I wanted to obtain with this design is the ability for the links themselves to scale with the length of the text; this would enable me to change out the link text without messing with any positioning/height/width properties. I achieved this by just leaving that stuff out and using padding within the links themselves.
However, something is up in IE where the bottom links will "jump" slightly to the right when hovered over. I have played around with a few things to try and correct it (margin, bold, etc...) but nothing seems to be working. This doesn't happen on the top links, only the bottom blue ones.
*UPDATE* this issue has been corrected. Turns out that IE was putting in a border when it shouldn't have been. Easily corrected with a "border-style:none;" put into the hover styles.
One of my changes to the original design involves the use of a border around the top links when a hover occurs. The links from the original design had no border, but I was interested in seeing what one looked like. I positioned the bottom bar in such a way that only the top and two side borders are seen when a link is hovered over: I think this gives it a very cool effect, like it is blending into the bottom menu bar.
This menu idea could be taken further. Ideally it would be combined with some cool :hover attributes and visibility:hidden attributes in order to have the bottom menu change whenever someone clicks on a top link, without loading a new page. However, at this point I do not know if that would work at all with IE 6, due to it's crappy :hover implementation.