How to create a simple horizontal list menu

Here’s a simple how-to make a horizontal list menu with all the necessary steps explained. The full result can be found here. The HTML The HTML part consists of <div>,...

Here’s a simple how-to make a horizontal list menu with all the necessary steps explained. The full result can be found here.

The HTML
The HTML part consists of <div>, <ul> and <li>. look below:

<body>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
<br style="clear: left" />
</div>
</body>

The CSS
The CSS is what does the real magic. Without it, the list would be a normal unordered list of items. I’ll explain it all below:

html {
font-family: Arial, Helvetica, sans-serif; /* Sets the font-type for the whole page and what to use if one is not available */
font-size: 11px; /* sets font size */
color: #666; /* Sets the font color for the whole HTML page */
}

.menu {
width: 100%; /* The menu should be the entire width of it's surround object, in this case the whole page. Adjust it to see other results. */
background-color: #333; /* sets a dark grey background color */
}

.menu ul {
margin: 0; /* sets the margins to 0 */
padding: 0; /* sets paddings to 0 */
float: left; /* makes the object float left. In this case it's the unordered list */
}

.menu ul li {
display: inline; /* makes the list items appear on one line instead of descending order. */
}

.menu ul li a {
float: left;
text-decoration: none; /* removes underline from the links */
color: #fff; /* text color of the links */
padding: 10px 11px; /* 10px of padding to the right and left. 11px of padding to the top and bottom. */
background-color: #666; /* sets background color. */
}

.menu ul li a:visited {
color: #fff;
text-decoration: none;
}

.menu ul li a:hover, .menu ul li .current {
color: #fff;
background-color: #0b75b2; /* changes the background color of the list item you hover over */
}

If you would like to download the sourcecode, it can be found here.

If you have any questions, please leave it in the comment field and I'll answer to the best of my abilities!

About the Author

Loves to play videogames, fiddling with webdesign and generally anything which is related to technology. Currently works as a IT consultant for Palantir AS, located in Norway.