Pure CSS Rollover Navigation

roryt 1 Tallied Votes 263 Views Share

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;
Pim 0 Junior Poster

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

wickedsunny 0 Junior Poster in Training

awesome buddy

saurabhpandey 0 Newbie Poster

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

ko ko 97 Practically a Master Poster

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.