Vertical Nav

Here are the steps to create vertical navigation on your website.  The site the code is taken from is here.   The code samples below will be modified and updated by Sept. 19.  They are not reflective of html5 before that time.

1.  If you are working from a page where you already have horizontal navigation buttons, then you should delete  the stylized links for the horizontal buttons. Doing this will keep you from being confused about which links are active.

2.  Your links (in your html page) should be a list (see right)

3.  Assuming your page has wrapper, banner, navigation, content and footer divs then you will be moving your content div to the right (in your CSS) by making a margin-left: 150px.  You will need to calculate the exact number of pixels to move your content div to the right.

4 .  Add to your navigation div (in CSS) the display, width, height and margin-top properties. (see left)

5.  Next you will style the ul (in your CSS) to take off the style, margin and padding.  See #navigation ul (below/right)

6.  You will also take off the styling and margin (in your CSS) for the li.  See #navigation li (right)

7.  Then you will stylize your links (in your CSS).  See #navigation a: link, a:visited (right)

8.  Also stylize the focus and hover states for your navigation.  See #navigation a: hover, focus (right)

9.  Each time you add and edit your CSS, be sure to check the file locally in a browser to make sure you have typed in the code correctly.