How to Create a Vertical Navigation Menu with CSS
In this how-to, you'll learn how to create a vertical navigation menu.
- Start with the following HTML document containing an unordered list:
With no CSS, it will display as follows:<!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>
- 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 withtext-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:
Open the HTML page in a browser. This code renders 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; }