CSS Vertical Pop Out and Drop Down Menu using Peterned's csshover.htc
This semantically correct Vertical CSS Popout 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 vertical popout menu.
Note from Claire at Tanfa: This CSS vertical popout 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 website (I put it in the same directory as my CSS file /css/csshover.htc) 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 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.
Vertical CSS Menu
- Vertical CSS Menu with Popout and Dropdown Menus
Last modified 2005-01-31 to address IE5+ compatibility issues.- Grab/Read the Basic Tutorial
- Grab/Read the Advanced Tutorial (Tanfa)
- Grab/View the CSS in a text file
- Download the external CSS file
- Grab the whatever:hover (Peterned)
- Example of this CSS Vertical Menu in a Pixel Perfect Environment
The above pixel perfect CSS menu uses multiple background images to achieve a more visually appealing menu structure.
Horizontal CSS Menu
- Horizontal CSS Menu with Dropdown and Popout Menus
Last modified 2005-01-31 to address IE5+ compatibility issues.
Last modified: 2010-09-30T12:09:42-0700
