How to create Navigation Bar using CSS?

Navigation Bar using CSS
Live Demo

HTML Part:

The HTML part is very simple, the structure is a <ul> list with a <li>

element for each link in the navigation bar:

     <ul>

     <li><a href="#">Home</a></li>

        <li><a href="#">Services</a></li>

        <li><a href="#">About</a></li>

        <li><a href="#">Contact</a></li>

    </ul>

CSS Part:

Copy the css code and paste in the <header> section of your webpage:

<style>

{

list-style:none;

padding:0px;

margin:0px;

}

{

float:left;

}

a:link, a:visited

{

display:block;

width:150px;

text-align:center;

font-family:Tahoma, Verdana;

color:#333333;

text-decoration:none;

padding:6px;

font-weight:bold;

background-color:#66CCFF;

}

a:hover

{

background-color:#6699CC;

}

</style>

Pages