Here I am trying to make simple navigation, which uses the html tag unordered list (ul li). It would be nice if we are using unordered lists for navigation menus. We can easily manage the navigation though DOM and it may help a little bit on SEO (Search Engine Optimisation).

Before creating this navigation, I am expecting that you may have some simple idea about HTML and CSS. 

First, we have to create one simple html like the following on your favorite html or text editor. I am using intype editor for creating the document and I personally like to code it by hand. I am not using any other user interface software for creating the html elements.

So the html code will be like the following

Home
About Us
Contact Us
Site map

 
So, our html is ready!

Next, we need to create the CSS.

Since we are not creating any other pages, I am only covering the styles required for the current page. Before that, we need to add the style sheet path to the document like this inside the head tag.

Now I am creating the style sheet required for the page

I wrote the following code on the style sheet style.css file

body{
margin:0;
padding:0;
font-family:verdana, arial;
font-size:12px;
}
ul.nav{
margin:0;
padding:0;
list-style:none;
}

ul.nav li a{
text-decoration:none;
}

Now the vertical navigation is ready. You can add color for the anchor tag as you wishes like this

ul.nav li a{
text-decoration:none;
color:red;
}

If you want to add some color on the mouse over, you simply need to add the color for the element

ul.nav li a:hover{
color:green;
}

So the mouse over is also ready. You need to add proper padding, margin to the ul li tags, and then it will look nice.

Now I am changing this to horizontal navigation. For that we need to float the li selector. So it will looks like this

ul.nav li{
float:left;
padding-right:15px;
}

 
Padding-right used for the space required after the each menu. So the basic menu is ready.

Download sample file Less than 1 KB.

This is the very basic navigation style that can be creating with XHTML CSS. We can enrich the menu by adding background colors, background images or roll over effects. That all things I will explain another time.

Hope this tutorial will be interesting to you. If you have any doubt, suggestions or questions please post comment.