Horizontal CSS List Menu

This tutorial will show you how to make a horizontal CSS list menu. No images, no javascript. Just a simple, cross browser compatible CSS list menu! If you want to see the finished product or you just want the code, look here.

First of all we’ll need the HTML for our list menu, this is just a normal unordered list.

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<br style="clear:left"/>
</div>

It’s just a simple html page with an unordered list menu on. You might notice I’ve added a div called menu around the list, I like to do this as it helps me remember what part of the code does what if I ever have to go back to it.

Next we’re going to add the CSS code for the div called menu that surrounds the list.

.menu{
	width: 100%;
	background-color: #333; }

Again this is nice and simple. The menu div will be the full width of the div it’s inside and will have a dark grey background.

Next we add the syling for the list and the list items.

.menu ul{
	margin: 0; padding: 0;
	float: left;}

.menu ul li{
	display: inline;}

.menu ul li a{
	float: left; text-decoration: none;
	color: white;
	padding: 10.5px 11px;
	background-color: #333; }

.menu ul li a:visited{
	color: white;}

.menu ul li a:hover, .menu ul li .current{
	color: #fff;
	background-color:#0b75b2;}

Again it’s all pretty simple, you should be able to understand the code with a little bit of CSS knowledge. Have a tinker with the code if you’re unsure about something.

You might also want to sign up for the RSS Feed or view some of my other CSS Tutorials