How to Create a Vertical Navigation Menu with CSS

See CSS: Tips and Tricks for similar articles.

In this how-to, you'll learn how to create a vertical navigation menu.

Start with the following HTML document containing an unordered list:


<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>Vertical Navigation Menu</title>
</head>
<body>
<main>
	<header>
		<h1>Vertical Navigation Menu</h1>
	</header>
	<nav>
		<ul id="mainMenu">
			<li><a href="home.html">Home</a></li>
			<li><a href="services.html">Services</a></li>
			<li><a href="products.html">Products</a></li>
			<li><a href="support.html">Support</a></li>
			<li><a href="blog.html">Blog</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</nav>
</main>
</body>
</html>

With no CSS, it will display as follows: An unordered list

Create a file for an external styesheet and link to it from the HTML using the following tag:
```
<link href="horizontal-menu.css" rel="stylesheet">
	
```
Inside the stylesheet, start by removing the default list style:
```
ol,ul {
	list-style: none;
}
```

Set the width and margins of the menu:

#mainMenu {
	margin: 10px;
	width: 120px;
	font-family: sans-serif;
}

Set the list items to display as blocks, and add borders to the left, right and bottom edges of all of the list items.
```
#mainMenu li {
	display:block;
	border:1px solid #000;
	border-top:0px;
}
```
Add a top border to the first list item with the :first-child pseudo-class.
```
#mainMenu li:first-child {
	border-top:1px solid #000;
}
			
```
Change the a elements to block elements. We'll also add some formatting styles and remove the underline with text-decoration: none.
```
#mainMenu a {
	display:block;
	padding:3px;
	text-decoration:none;
	color:#009;
}
			
```
Finally, change the hover state of the links so that they highlight when a user points to them.
```
#mainMenu a:hover {
	background-color:#009;
	color:#fff;
}
```

The finished CSS should look like the following:


#mainMenu {
	margin:10px;
	width:900px;
	font-family: sans-serif;
}
#mainMenu li {
	display:block;
	width:120px;
	float:left;
	margin-left:2px;
	border:1px solid #000;
}

#mainMenu a {
	display:block;
	padding:3px;
	text-decoration:none;
	background-color:#fff;
	color:#009;
}

#mainMenu a:hover {
	background-color:#009;
	color:#fff;
}

Open the HTML page in a browser. This code renders the following: A Vertical Menu

How to Create a Vertical Navigation Menu with CSS

Related Articles