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.
Note 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
- Horizontal CSS Menu with Dropdown and Popout Menus
Vertical CSS Menu
- Vertical CSS Menu with Popout and Dropdown Menus
Last modified 2005-01-31 to address IE5+ compatibility issues.
Last modified: 2010-09-30T12:09:41-0700
