Creating Navigation menus with rounded corner background (Single Image)

1)Add background image
Create a background image for your navigation based on your idea.
below image is an example. You can use your own style.



2) Copy the following code inside the div/td where you want to put the navigation.

<div class="mc">

<ul class="nav">

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

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

<li><a href="#"><span> Sitemap </span></a></li>

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

</ul>

3) Copy the following code inside the respective css document.

ul.nav{

padding:0;

margin:0;

}

ul.nav li{

float:left;

list-style-type:none;

margin-left:5px;

}

ul.nav li a:link,ul.nav li a:visited{

text-decoration:none;

font-weight:bold;

font-size:14px;

color:#669933;

height:35px;

display:block;

padding-left:15px;

cursor:pointer;

float:left;



}

ul.nav li a:hover{

text-decoration:none;

font-weight:bold;

font-size:14px;

color:#FFFFFF;

background:url(images/nag_bg.jpg) no-repeat;

}

ul.nav li a:hover span{

background:url(images/nag_bg.jpg) no-repeat right;

}

ul.nav li span{

display:block;

height:35px;

padding-right:15px;

line-height:30px;

float:left;

}

Thats all. your navigation is ready to use.
You can see the example in the following website.
Freelance web designer india