Restyling the Unordered Navigation List

Begin by making changes to your #leftcol #nav ul selector. It should currently look similar to Listing 1.

#leftcol #nav ul{
 padding: 0;
 margin: 0;
 background-color:#00FF99; 
}

Listing 1. #leftcol #nav ul selector code

Change the code in Listing 1 so it resembles the version in Listing 2.

#leftcol #nav ul {
 margin: 0; 
 padding: 0;
 background-color: transparent;
 list-style-type: none;
 border: 1px solid #000000;
 }

Listing 2. Revised #leftcol #nav ul selector code

Open basicalyout.css in Dreamweaver, locate the #leftcol #nav ul selector, and complete the following steps. Remember that while you type in the style sheet, your CSS code hints are active. Take advantage of them and monitor what they are offering as you type. Code hints speed your workflow dramatically:

1. Locate the background-color value delete it and type transparent.
2. Place your cursor after ; and press Enter.
3. Type list-style-type: none; and press Enter. When you set the value of this property to none it removes the bullets from the list items.
4. Type and press Enter. The percent value you set here scales the font size based on the default percentage you set in the body selector.
5. Type border: 1px solid #000000;. This shorthand code sets the border for all four sides in accordance with the given values. In this case the borders will be one pixel wide, solid, and black.
6. Save your work.