CSS Drop Down Menus
The idea here is to show your local navigation along with your persistent navigation, but to do so in a way that is accessible and so that it will work without javascript.
How it works
The HTML
You create an unordered list <ul></ul>, with nested unordered lists within each list item, when you have local navigation you'd like to show.
EG:
<ul>
<li>colors
<ul>
<li>blue</li>
<li>red</li>
<li>green</li>
</ul>
</li>
</ul>
The CSS
There are several things at play within the CSS. We are not going to try and code this by hand though, but I do want you to get a sense of what is happening.
Changing the list:
First, you don't display the bullets in the unorderded lists.
Then you need to align the list so that it is side-by-side. You do this you will float the list items <li></li> to the left.
Making the submenu appear:
You also will need special rules in the CSS, which are called selectors. The two we use in the drop downs are child selectors (>) and the :hover effect. (This can be used on link tags or the list items themselves <a:hover> or <li:hover>.)
The child selector is essentially a rule that says it only applies to a child of an element.
Then we use positioning
Finally, in the drop down parts of the menu, we'll need to use special positioning properties. Normally, we have been using the default values, which are static -- the elements stack on top of one another.
Relative positioning allows you to offset elements from one another or from the document itself.
Absolute positioning takes an element out of the normal flow, which means, essentially, that it will not be influenced by the position of other elements (relative or static).
Fixed is based on the document window, and will not scroll. (Just like that background image property.) Don't use this except in limited circumstances.
Back to our menu
So, in the case of our drop down, the appearance of the sub-menu is controlled by relative position (relative to the list item) and the actual drop down is controlled by the absolute position (otherwise it wouldn't overlap the content underneath it.)