Create rollover effects

Open format.css from the Travel West folder.

Copy the formatting for

the topnav, navbar, navbar li, and navbar li a areas:

1. #topnav {
2. background: #cccccc;
3. width: 100%;
4. }
5. #navbar {
6. background: #cccccc;
7. float: left;
8. width: 100%;
9. padding: 0;
10. margin: 0;
11. list-style: none;
12. }
13. #navbar li {
14. display: inline;
15. }
16. #navbar li a {
17. background: #cccccc;
18. float: left;
19. padding: 5px 20px;
20. }

Paste it into layout.css in the Advanced Layout folder.
Change the background colors to black (#000000).
In the navbar li a formatting, put it in the Arial font, change its color to white, and remove the underlining:

1. #navbar li a {
2. background: #cccccc;
3. float: left;
4. padding: 5px 20px;
5. font-family: arial, helvetica, sans serif;
6. color: #ffffff;
7. text-decoration: none;
8. }

6. Open index.html from the Travel West folder.
7. Copy the HTML code in the topnav area:

   
   
   • California
   
   
   • The Rockies
   
   The Midwest

8. Paste it into advlayout.html in the Advanced Layout folder, below the topright area.
9. Change California, The Rockies, and The Midwest to:
   Laptops
   Cell Phones
   PDAs

Between the topright and topnav areas, insert a clear:

1. The Magazine for People Who Like Gadgets

Copy the formatting for clear from format.css in the Travel West folder.

Paste it into layout.css in the Advanced Layout folder.

In layout.css, insert formatting that changes the background color of the navbar links when the mouse pointer hovers on top of them:

1. #navbar li a:hover {
2. background: #ffff00;
3. color: #000000;
4. }

Save format.css and advlayout.html.

Reload advlayout.html in the browser.

It should look like this:

Rest the cursor on the PDAs link.

It should look like this:

Web Layout HTML & CSS