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:

<nav>
	<a href="#">Home</a>
	<a href="#">About Us</a>
	<a href="#">Order</a>
	<a href="#">Privacy Statement</a>
	<a href="#">Contact</a>
</nav>

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 navigation element and its content:

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

float immediately collapses the width of the element to that of its widest piece of content (“Privacy Statement”, in this case). In the version shown 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:

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

You’ll note that each link is only as large as its content, and that all links are displayed on the same line. That’s because the a tag is displayed inline.

nav a {
	text-decoration: none;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.7);
	display: block;
}

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

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

And a :hover state:

nav a:hover {
	background-color: rgba(0, 0, 0, 0.9);
}

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.