Web Design 1 - HTML Lesson 11 - Simple Horizontal Menu

A key part of any website is the navigation menu. For this lesson you will create a simple menu that will go across your page right underneath the logo. Very much like the one at the top of this page.

It will use a new ID section called menu, and within it we will define a paragraph and link styles - this is to make your menu design look different than the rest of the page

Add the following code to your css sheet - I would put it somewhere near the top - maybe after the definition for header 
- this way your CSS sheet somewhat matches what the web browser is reading when setting up your page

Then add the following code to your html page - you may notice that for the links there is a # sign where the html page name should be - this is a common placeholder used when testing out a new design - it is more efficient to create one page that looks the way you want it to and then make the other pages. Once those are created you just go back and modify the link code - make sense? For now, if you click on the link it will just reload the current page. The # makes a link to the current page so you can see what the link styles will look like.

You are just adding the MENU division - I left the header and content tags in just to show you where to type in the MENU Division. 


Screenshot of page with the as it first loads:

Screenshot of page with the HOVER action over the About Our Company link: 

Assignment for Lesson 11

  1. Get the menu from the example to work on your page

  2. Challenge: try changing the styles to make the menu look best on your own page