How to Create a Horizontal Navigation Menu with CSS
In this how to, you'll learn how to create a horizontal 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>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>
- 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:
Setting the#mainMenu { margin: 10px; width: 900px; font-family: sans-serif; }
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 withtext-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:
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; }