1. Home
  2. How-to Articles
  3. How to Create a Vertical Navigation Menu with CSS

How to Create a Vertical Navigation Menu with CSS

  • google plus

In Brief...

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

Take our Advanced CSS Training course for free.

See the Course Outline and Register

Instructions

  1. 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
  2. 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">
  3. Inside the stylesheet, start by removing the default list style: 
    ol,ul {
	list-style: none;
}
  4. Set the width and margins of the menu: 
    #mainMenu {
	margin: 10px;
	width: 120px;
	font-family: sans-serif;
}
  5. 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;
}
  6. Add a top border to the first list item with the :first-child pseudo-class. 
    
#mainMenu li:first-child {
	border-top:1px solid #000;
}
  7. 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;
}
  8. 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;
}
  9. 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

Related Training

Categories

Courses

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss