How to Create a Horizontal Navigation Menu with CSS

See CSS: Tips and Tricks for similar articles.

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

Start with the following HTML document containing an unordered list:


<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>Horizontal Navigation Menu</title>
</head>
<body>
<main>
	<header>
		<h1>Horizontal 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: 900px;
	font-family: sans-serif;
}
```
Setting the width prevents the menu from wrapping when the user shrinks the browser window.
Set the list items to display as blocks, give them a width, and float them to the left so that they'll each display to the right of the preceding item.
```
#mainMenu li {
	display:block;
	width:120px;
	float:left;
	margin-left:2px;
	border: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;
	background-color:#fff;
	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 Horizontal Menu

How to Create a Horizontal Navigation Menu with CSS

Related Articles