Styling Lists and Navigation Menus - Beginning CSS3 - page 218

1. give the unordered list at the top of the aside<div> the id nav by amending
the opening <ul> tag:
<div class="rounded shadow" id="aside">
<ul id="nav" >
<li><a href="#">Home</a>

2. Create an id selector in the style sheet to remove the bullets from the unordered list.
Also, give it a top margin of 20px , but zero the other margins and padding like this:
#nav {
list-style-type: none;
margin: 20px 0 0 0;
padding: 0;
}

3. Make sure the individual list items don't have any margins by adding the following
style rule:
#nav li {
margin: 0;
}
4. next comes the key to this technique. Add a rule to set the display property of
links inside the nav unordered list to block . This makes the link fill the entire
width of the list item, turning it into a clickable button. The effect will become
obvious when you add a background color later. The rule looks like this:
#nav a {
display: block;
}

5. Amend the style rule to add some padding to the links, remove the underline, use a
bold font, and a light gray text color:
#nav a {
display: block;
padding: 0.5em 15px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
}

6. To make the links look like buttons, add background colors for the normal and hover
states:
#nav a:link, #nav a:visited {
background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}

7. Save the style sheet, and test the page in a browser. The links are now solid blocks

of color, as shown in Figure 10-12 .