1)Add background image
Create a background image for your navigation based on your idea.
zBelow image is an example.
<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)Add CSS Styles
Add below css styles to your stylesheet files or to your html page
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;
}
2)Add html code
followin is the html code of navigation bar. just add this code to your web page where you want to show the navigation bar
Download sample zip file
Original Post by,
Ajinesh Ravi
