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!

Work with me

Brand identity design by Nela Dunato
Brand identity design for consulting companies

My book

The Human Centered Brand by Nela Dunato
The Human Centered Brand: A Practical Guide to Being Yourself in Business