Vertical Navigation Lists

Choose Method: Show Dreamweaver Instructions | Show Code

To make a pretty box style navigation list using CSS we use a simple HTML list and some CSS code.

Create the List

Make these words into a list: Home, About, Products, Services, Contact

In Dreamweaver simply use the list icons to make the text into a list.

The code for lists look like this.

<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
</ul>
</body>

Add links

Add in some links to your list items.

In Dreamweaver, highlight each word and use the link text box in the properties window to create the link.

The HTML should look like this when the links have been made.

<body>
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="products.htm">Products</a></li>
<li><a href="services.htm">Services</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>
</body>

Remove Bullet Points

Using CSS, turn off the list item bullet points.

In Dreamweaver this is found in the list panel of the CSS window.

The CSS code looks like this:

li {
list-style: none;
}

Style the Links

Now style the links adding a font styling, a background colour, width, padding & margins. Most importantly, the links must be styled as 'block' otherwise they will not have any set width, as they are inline elements by default.

Using Dreamweaver,

In the Type panel set the font to Verdana, size to 80%, colour to white, decoration to none
In the Background panel set the background colour. In this case I have used #a4b788
In the Block panel set the display to block.
In the Box panel, set the width to 10em. This restricts the size of the link, otherwise it would be as wide as the page. Set the top & bottom padding to 0.2em to give the link some height & space around the text. Set the left padding to 0.5em to indent the text slightly. Set the top margin to 0.1em to space out the links slightly from each other.

The CSS code looks like this:

a {
background: #A4B788;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 80%;
display: block;
width: 10em;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin-top: 0.1em;
padding-left: 0.5em;
}

Position list

Lastly, set the list itself to have no left margin. This will set the list to the left of the document, in Internet Explorer 6 & 7.

In Dreamwaver, select the Box panel, and set left margin to 0em.

This is the CSS code.

ul {
margin-left: 0em;
}

Your navigation should now look like this.

See Firefox Hacks for information on making this display correctly in Firefox and other Mozilla browsers.

See Internet Explorer 7 Hacks for information on making this display correctly in Internet Explorer 7.

See Hover Pseudo-Class for information on making the links change on hover.