Pure CSS Rollover Navigation


This piece of css will show you that it is perfectly possibly to create a good looking navigation bar without any images or javascript and just a couple of lines of css.

All you need to do is create a html file that contains a unordered list in it with your navigation links in it as <li>. You will then need to simply attach the css file to your html.

I hope this will help you to realise that it isn't all about huge flash navigation and rollover images.

You can find my example here.

/* CSS Document */

body	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #999999;
	margin: 0px;

ul	{
	float: left;
/*this part will stop it moving when the page scrolls so you may not want to include it*/

	position: fixed;
	margin-left: 20px;

li	{
	width: 150px;
	height: 15px;
	margin-top: 3px;
	border-style: solid;
	border-width: 1px;
	border-color: #64acd8;
	font-weight: bold;
	font-size: 120%;
	background-color: #ffffff;
	list-style: none;
	padding: 3px;
li:hover	{
	background-color: #faffd8;
	border-color: #004f7b;

a:link	{
	text-decoration: none;
	color: #999999;
a:hover	{
	text-decoration: none;
	color: #333333;
a:visited	{
	text-decoration: none;
	color: #999999;

a:active	{
	text-decoration: none;
	color: #FF0000;

Very nice. The only thing is that the a:hover colour doesn't work in combination with the colour of the list.


awesome buddy


nice dude.....really gud...


nice .. menu.. a:hover color should be work; you need to change 'a' element to block type. Here ..

a { display: block }

so, it give anchor link to full width of 'li' and the color will work when hover.

Isn't it about time forums rewarded their contributors?

Earn rewards points for helping others. Gain kudos. Cash out. Get better answers yourself.

It's as simple as contributing editorial or replying to discussions labeled or OP Kudos

This is an OP Kudos discussion and contributors may be rewarded
Start New Discussion
Tags Related to this Article