Navigation in-depth: dropdown menus
Most sites need more than a simple menu for navigation. Dropdown menu are a popular solution to providing ready access to subsections of a site without taking up screen space.
Basic list with only browser default styling.
The menu begins with a nested list structure.
First stage
This step is just the usual horizontal menubar styling that we have learned.
The list items given a specific width and floated into position beside each other.
The width also constrains the sublist blocks so that the items in them stack vertically in the available space.
The example stage 1 in a separate page
Second stage - start with first version, hide sublists
The example stage 2 in a separate page
Third stage - start with second stage, show sublists when hover
The lists must be properly nested, with the sublist inside the li.
The example stage 3 in a separate page
Popout menus on vertical menubars
The dropdown/popout effect can also be used with vertical menus.
We begin with the same basic list.
First stage
This step is just the usual vertical menubar styling.
The styling restricts the width of the entire list.
The example stage 1 in a separate page
Second stage - start with first version, hide sublists
The example stage 2 in a separate page