« Back to the CSS article: Pure CSS Horizontally Centered Drop-Down Menus by Matthew James Taylor
This menu is centered using my horizontally centered menus technique but with a slight midification. I have fliped the left-right positions and floating direction of the ul's and li's so the invisible ul overhangs the left side of the page instead of the right. This allows me to remove the overflow:hidden; rule - this makes the sub menus appear.
There is never any need for CSS hacks. This centered menu is uses hack-free CSS and is 100% valid.
The HTML in these centered menus validates as XHTML 1.0 strict.
These centered tabs are fully compatible with resizable text. Resizable text is important for web accessibility. People who are vision impaired can make the text larger so it's easier for them to read. It is becoming increasingly more important to make your website resizable text compatible because people are expecting higher levels of web accessibility.
JavaScript is not required for all standards-compliant browsers. The only exception is Internet Explorer version 6 and below. These browsers are over 8 years old and they are no longer supported by most large internet sites - Google, YouTube, Digg etc. but you can still make these drop-down menus work for all browsers by including a small line of code at the bottom of the page. This code uses IE conditional comments to expose a small piece of JavaScript to old IE browsers only. This JavaScript adds some events to the menu HTML so the hover function works properly. This JavaScript is never seen by any other browser.
The horizontally centered drop-down menus has been tested on the following browsers.