This menu is a great example of a pure CSS horizontal dropdown. The only slight deviation from "pure CSS" is the inclusion of an IE6-only "behavior" called whatever:hover to correct for that browser's lack of hover on <li> elements.
Centering a menu like this is relatively easy if you fix the widths of the main menu items. eg. say you have 5 items at 120px each, then the total menu will be 600px wide, and you simply enclose the menu in a 600px container, and center with margin:0 auto;. Things only get tricky when you allow the element width to vary with the text size, which is why I made the demo with the second item much wider than the rest.
The centering method relies on use of the <del> tag, which for whatever obscure reason was able to be styled slightly differently than a normal div to achieve the centering. Normally, text within a <del> tag would have a strikeout line through it, so that is changed in the stylesheet with text-decoration:none.
You'll see in the stylesheet the random presence of a yellow background color on container, and green on menuh. Those colors will never show up as long as the layout is working, but they can be really helpful troubleshooting tools if changes to the stylesheet cause the layout to go wonky.
Return to tightCSS Home Page