Web Design - 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 definintions for your container and header divs
- 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
- put the new menu div between the header and content divisions

 

Screenshot of a page with a menu as it first loads:

Screenshot of page with the HOVER action over the About Our Company link - changing to bright green text and adding borders above and below it: