Instruction: In this tutorial, we will use the finished version of the Vertical Menu tutorial file which we renamed as horizontalMenuStartPage.html.  It is helpful to test in browser after each step to "see" the changes.

Carving out space for the horizontal menu
Option 1: Using the EXISTING sidebar1 div

Carving out space for the horizontal menu
Option 2: Creating a NEW div called #nav

Carving out space for the horizontal menu
Option 3: Simply used the <ul> tag as a top-level container

Converting the vertical menu to a horizontal menu

NOTE: You could have created a new rule #nav li {display:inline;} instead of the two float properties; however, it does not render correctly on all browsers.

Styling the horizontal menu

BONUS 1: If you plan to use both a horizontal and vertical menu on a page, wrap each list block with a div container that has a unique ID style for both (i.e., #verticalMenu and #horizontalMenu).  Then, you can use descendent selectors (i.e., #verticalMenu ul and #horizontalMenu ul) to target them independently.
VIEW EXAMPLE

BONUS 2: Instead of using the color property for the various states, you could use the background property in its place and use images instead.

BONUS 3: You could have used just a list of links—<a> tags to create a real simple horizontal or vertical menu. VIEW EXAMPLE