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

How to Create a Horizontal Navigation Menu with CSS

  • google plus

In Brief...

In this how to, you'll learn how to create a horizontal 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>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
  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: 900px;
	font-family: sans-serif;
}
    Setting the width prevents the menu from wrapping when the user shrinks the browser window.
  5. 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;
}
  6. 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;
}
  7. 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;
}
  8. 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

Need CSS Training?

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.

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