Wednesday

Yesterday we got our navigation options added to the page as checklists. Today we're going to work at turning them into drop-menus.

In coding up our navigation, we gave a class name to the unordered list that holds both submenus. That HTML element was ‹ul class="menu"›. Thus, in our CSS, to style it we will begin with a declaration of ul.menu {}. We need to define its position as fixed at the very top of the display. We will use two declarations to do that:

position: fixed ;
top: 0 ;

That first declaration ensures that the element won't be pushed around by our grid. The second declaration statest that the position will start at the very top of the display window, instead of wherever the code might start in the HTML sequence.

Then we're going to add a child combinator declaration. In code, a "child" is a line of code that is nested one step within another set of code; as an example, the ‹body› element is the child of the ‹html›tag. Going a little deeper, individual paragraphs in the ‹body› element are "descendents" (but not children) of the ‹html› tag.

So that's the "child" part of "child combinator declaration." The specific selector we need to add is ul.menu › li {}. This child combinator selector means that only list items that are direct children of the unordered list named "menu" will be styled by the declaration inside the curlies. We need to add the following two declarations:

float: left ;
position: relative ;