Two Column Layout Vertical Menu Tutorial
Add Page Navigation Layout and Styling
Section 1 Lesson 6

Add lines 29-36 to the end of the site.css file in your practice folder, then save.

There are no changes in the index.html file from the last lesson. The lines that are impacted by the CSS changes are highlighted.

Completed Step 1

The main change in this view is the background and layout of the navigation. Styling the list items are done in the next step. For now they may bleed over content that follows.

Add lines 37-51 to the end of the site.css file in your practice folder, then save.

This step uses ul and li elements to layout a horizontal menu using anchor elements they contain.

There are no changes in the index.html file from the last step. The lines that are impacted by the CSS changes are highlighted.

Completed Step 2

This view shows the menu choice lined up and contained in the nav element.

Add lines 52-72 to the end of the site.css file in your practice folder, then save.

This removes the left padding for the first li element and all padding for even numbered li tags. The even numbered li elements contain a bar separator and the odd numbered li elements the actual menu choice.

The CSS pseudo first-child selector used for the first li element is not supported in IE6. The nth-child(even) pseudo selector used for the even numbered li element is not supported in IE8, IE7 and IE6. The alternative to support those browsers is to provide a CSS class and apply to the li elements needing it.

The CSS nav-separator class selector was created to handle the styling of the separator li elements if the IE6, IE7 and IE8 browsers are supported. The separator li elements already are targeting the nav-separator class selector when the HTML was added in the last step.

There are no changes in the index.html file from the last step. The lines that are impacted by the CSS changes are highlighted.

Completed Step 3

The main change in this step is the tighter spacing between the menu choices.

Add lines 73-80 to the end of the site.css file in your practice folder, then save.

This step removes the default web browser styling for the a element within the nav element. You replace it a custom designed color scheme.

There are no changes in the index.html file from the last step. The lines that are impacted by the CSS changes are highlighted.

Completed Step 4

The main change in this step the default color and rollover color of the page navigation menu choices. The default underline is removed but toggled on during the rollover state.