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;
11 Years
Discussion Span
Last Post by ko ko

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


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.

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.