Some Different Styling
Still the SOS mechanism, but with some different styles.
About Son of Suckerfish dropdown menus
This method uses nested lists to create complex submenus, and the hover pseudoclass to "hide and show" them depending on whether a user is mousing over the main topic.
The context box for position: absolute is the most recently position ancestor of the positioned element, or if there isn't one, the body element. In this exercise, the context box is the body because no ancestors have been positioned. Remember that if you don't actually use the offset coordinates (top, bottom, left, right properties) the positioned element will display where it would have been in the normal flow. So, left: auto puts the positioned element where it would have been in the normal flow, and we don't need to worry about the context box. :-)
This menu is created with the "Son of Suckerfish" method. Keep in mind that 100% CSS dropdown menus need a script for IE6 and earlier, but we'll not fuss that (you can read all about it at the Son of Suckerfish tutorial site). You can read about Son of Suckerfish here. Note that Son of Suckerfish is written in xhtml and there are some small variations in the CSS.
We're keeping this exercise simple so you can "see" the mechanism of the dropdown without a lot of CSS to make it look good. Here are some other dropdown menu tutorials if you are interested in fancying it up:
- Red Team CSS3 Dropdown Menu
- Designmodo CSS3 Dropdown Menu (notice that this designer uses class designations where I would probably choose to use ids - be aware of this as you look at the markup and style rules). This one has fancy CSS3 transitions.
- 38 Open Source CSS Dropdown Menus