Using HTML lists and CSS to create a button-like vertical navigation bar

1. Create the list structure. Add the following code block to create the structure of
the navigation bar. By using nested lists, you can provide the navigation bar with a
hierarchical structure (and you can style each level in CSS). In this example, the list
has two levels. (Refer to Chapter 3 for an overview of correctly formatting lists.)
This list is nested within a div with an id value of navigation, which we’ll later take
advantage of by using contextual selectors. (For this example, dummy href values
of # are being used, but in a live site, always check that your links lead somewhere!)
<div id="navigation">
<ul>
<li>
<a href="#">Section one</a>
<ul>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
<li>
<a href="#">Section two</a>
<ul>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>

<li>
<a href="#">Section three</a>
<ul>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
</ul>
</div>

2. Add some padding to the body element, so page content doesn’t hug the browser
window edges. Also, add the background-color pair shown following:
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
background-color: #aaaaaa;
}

3. Style the list. Add the following rule to remove the
default bullet points from unordered lists within the navigation
div, define a width for the lists, and also set the
default font style.
#navigation ul {
list-style-type: none;
width: 140px;
font: 1.2em/1 Arial, Helvetica, sans-serif;
}

4. Set an override for nested lists. As you can see from the
previous image, the nested links have much larger text.
This is because font sizes in ems are inherited, and therefore
the font size within the nested lists ends up at
1.2ems multiplied by 1.2ems. By adding the following
rule, the font size of nested lists is reset to 1em, making
nested lists look the same as top-level lists.
#navigation ul ul {
font-size: 1em;
}

5. Style the buttons. Use a contextual selector to style links within the navigation div
(i.e., the links within this list). These styles initially affect the entire list, but you’ll
later override them for level-two links. Therefore, the styles you’re working on now
are intended only for level-one links (which are for sections or categories). This
first set of property/value pairs turns off the default link underline, sets the list
items to uppercase, and defines the font weight as bold.

#navigation a:link, #navigation a:visited {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}

6. Set button display and padding. Still within the same rule, set the buttons to
display as block, thereby making the entire container an active link (rather than
just the link text). Add some padding so the links don’t hug the edge of the
container.
#navigation a:link, #navigation a:visited {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
display: block;
padding: 3px 12px 3px 8px;
}

7. Define colors and borders. Define the button background and foreground colors,
setting the former to gray and the latter to white. Then add borders to create a 3D
effect. Borders can be styled individually. By setting the left and top borders to a
lighter shade than the background, and the right and bottom borders to a darker
shade, a 3D effect is achieved. (Don’t use black and white, because it will make the
result is too harsh.)
#navigation a:link, #navigation a:visited {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
display: block;
padding: 3px 12px 3px 8px;
background-color: #666666;
color: #ffffff;
border-top: 1px solid #dddddd;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #dddddd;
}

8. Define other link states. The hover state is defined by
just changing the background color, making it slightly
lighter.
#navigation a:hover {
background-color: #777777;
}
The active state enables you to build on the 3D
effect: the padding settings are changed to move the text up and left by 1 pixel, the
background and foreground colors are made slightly darker, and the border colors
are reversed.

#navigation a:active {
padding: 2px 13px 4px 7px;
background-color: #444444;
color: #eeeeee;
border-top: 1px solid #333333;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #333333;
}

9. Style nested list item links. The selector #navigation li li a enables you to style
links within a list item that are themselves within a list item (which happen to be in
the navigation div). In other words, you can create a declaration for level-two links.
These need to be differentiated from the section links, hence the following rule
setting them to lowercase and normal font weight (instead of bold). The padding
settings indent these links more than the section links, and the background and
foreground colors are different, being very dark gray (almost black) on light gray
rather than white on a darker gray.
#navigation li li a:link, #navigation li li a:visited {
text-decoration: none;
text-transform: lowercase;
font-weight: normal;
padding: 3px 3px 3px 17px;
background-color: #999999;
color: #111111;
}

10. Style nested item hover and active states. This is done in the same way as per the
section links, changing colors as appropriate and again reversing the border colors
on the active state.
#navigation li li a:hover {
background-color: #aaaaaa;
}
#navigation li li a:active {
padding: 2px 4px 4px 16px;
background-color: #888888;
color: #000000;
border-top: 1px solid #333333;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #333333;
}
The navigation bar is now complete and, as you can see from the following images
(which depict, from left to right, the default, hover, and active states), the buttons
have a tactile feel to them. Should this not be to your liking, it’s easy to
change the look of the navigation bar because everything’s styled in CSS. To expand
on this design, you could introduce background images for each state, thereby
making the navigation bar even more graphical. However, because you didn’t

simply chop up a GIF, you can easily add and remove items from the navigation bar,
just by amending the list created in step 1. Any added items will be styled automatically
by the style sheet rules.