CSS Horizontal Drop Down and Pop Out Menu using Peterned's csshover.htc

This semantically correct Horizontal CSS Dropdown Menu has been finalized as of 2005-02-28. See links below for supporting files. View source to see the HTML/XHTML and CSS that controls this horizontal dropdown menu.

Tanfa CSS DesignNote from Claire at Tanfa: This horizontal dropdown and popout CSS menu uses the "whatever:hover" behavior file. It is available for download from the "whatever:hover page on Perterned's site. It simply needs uploading to your server (I put it in the same directory as my CSS file) and off you go.

There is a newer version of this file (V1.30.050121 - released 2005-01-21), since these menus were first written, which means you no longer have to use the specific selector workaround for them to work in IE5.x (see CSS comments). In our testing we've discovered that continuing to use the extra CSS specificity improves IE's rendering speed. There may not be noticeable difference in smaller menus though so using the extra specificity is no longer a requirement.



The h2 headings need to be in a list element themselves in the horizontal version because we need the dropdowns to be child elements within the h2's parent list to allow us to be able to select them without the use of child selectors in IE.

The hover targeting CSS itself has to be very specific for IE to understand it properly, again this is because we can't use child selectors.

Horizontal CSS Menu

Vertical CSS Menu

W3C Quality Assurance W3C Valid XHTML 1.0 W3C Valid CSS WAI Level A Conformance Made with Cascading Style Sheets

Last modified: 2010-09-30T12:09:41-0700