printer friendly version

Simple rollover menu

This tutorial teaches the best method to arrange your navigation, and make it look cool as well :)

The first thing to do is to put your links in an unordered list. This is the code how to do it:

<ul class="menu">
	<li><a href="#">home</a></li>
	<li><a href="#">about</a></li>
	<li><a href="#">services</a></li>
	<li><a href="#">links</a></li>

At first, it will not look so great.

But, if we use the CSS below to apply some visual formatting...

.menu {
	margin: 0px;
	padding: 0px;
	color: #000;
	width: 120px;
	list-style: none;
.menu li {
	padding: 2px 2px 0px 0px;
	margin: 0px;
.menu li a, .menu li a:visited {
	margin: 0px;
	padding: 3px 3px;
	color: #fff;
	display: block;
	border: #ccc 1px solid;
	background: #666;
	text-decoration: none;
.menu li a:hover {
	color: #000;
	background: #ccc;
	border: #000 1px solid;

...our navbar looks like this:

Want to make the navbar horizontal? No problem. Delete where it says width: 120px; and add these lines of CSS on the end of your stylesheet:

.menu li {float: left;} .menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

Easy, right? :) Now just change the numeric and color values, and you have a nice navigation to use on your website.
If you'd like to make a more appealing menu using images, proceed to the Image rollover menu tutorial.

Share this tutorial with your friends!

Branding & web design by Nela Dunato

Sign up NOW to get a BONUS brush set into your inbox!

You will also get notified when I add new free downloads. I won't spam you, I promise!