A vertically-oriented website navigation bar is in some ways easier to create, as the list is already vertical – the major issue is setting its layout. The navigation bar starts with much the same code as before; it’s only the CSS that changes. We will use the following HTML:

1. <ul id=nav">
2. <li><a href="#">Home</a></li>
3. <li><a href="#">About Us</a></li>
4. ;<li><a href="#">Order</a></li>
5. <li><a href="#">Privacy Statement</a></li>
6. <li><a href="#">Contact</a></li>
7. </ul>

Most habituated users expect the primary navigation for a website to be on the left or top of the page; we’ll set ours to the left with float. At the same time, we’ll alter the display of the content of the list:

1. ul#nav { float: left; font-family: "Bell Gothic Std", sans-serif;
2. text-transform: uppercase; letter-spacing: 0.5em; font-size: x-small; }

float immediately collapses the width of our unordered list to that of our widest piece of content (“Privacy Statement” in the case of the list above). However, the list items still have bullet points in front of them. We’ll turn those off by setting list-style-type to none:

1. ul#nav
2. { float: left; list-style-type: none; font-family: "Bell Gothic Std", sans-serif;
3. text-transform: uppercase; letter-spacing: 0.5em; font-size: x-small; }

In the version of the navigation list shown in the screenshot above, I have added a border on all sides of the navigation with the exception of the left to visually separate it from the content. The background-image I added was more than large enough for me to add some padding-top and bottom to place the navigational items in the middle of the element.

The links in the list still look somewhat plain. We also need to separate them from the background. Let’s do that through a descendant selector:

1. ul#nav li a { text-decoration: none; color: #fff;
2. background-color: rgba(0, 0, 0, 0.7); }

You’ll note that each link is only as large as its content. That’s because the a tag is displayed inline.

1. ul#nav li a { text-decoration: none; colour: #fff;
2. background-color: rgba(0, 0, 0, 0.7); display: block; }

They’re also a little close together. We’ll add padding to each link:

1. ul#nav li a { text-decoration: none; colour: #fff;
2. background-color: rgba(0, 0, 0, 0.7); display: block; padding: 0.75em; }

And a hover state:

1. ul#nav li a:hover { background-color: rgba(0, 0, 0, 0.9); }