#navigation
{
position: absolute;
left: 3px;
top: -1px;
width: 783px;
}
#navigation li
{
float:left;
}
#navigation li a
{
background-image:url(../navegation.jpg);
display:block;
}
.home
{
background-position:0px 0px;
width:125px;
height:45px;
}
.aboutus
{
background-position:-125px 0px;
width:124px;
height:45px;
}
.whyHost
{
background-position:-249px 0px;
width:131px;
height:45px ;
}
.fundraiser
{
background-position:-383px 0px;
width:115px;
height:45px;
}
.party
{
background-position:-505px 0px;
width: 115px;
height:45px;
}
.contactus
{
background-position:-630px 0px;
width:125px;
height:45px
}
#navigation a .hover {
background: transparent url(../navegation.jpg) no-repeat;
display:block ;
opacity: 0;
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#navigation .home .hover {
background-position: -0px -49px;
}
#navigation .aboutus .hover{
background-position: -125px -49px;
}
#navigation .whyHost .hover {
background-position: -249px -49px;
}
#navigation .fundraiser .hover {
background-position: -383px -49px;
}
#navigation .party .hover{
background-position:-505px -49px;
}
#navigation .contactus .hover {
background-position: -630px -49px;
}
and the html:
<ul id="navigation">
<li ><a class="home" href="[URL]http://www.events4gold.net"></a></li[/URL]>
<li ><a class="aboutus" href="[URL]http://www.events4gold.net/aboutus.html"></a></li[/URL]>
<li ><a class="whyHost" href="[URL]http://www.events4gold.net/holdinganevent.html"></a></li[/URL]>
<li><a class = "fundraiser" href = "[URL]http://www.events4gold.net/fundraiser.html"></a></li[/URL]>
<li><a class = "party" href= "[URL]http://www.events4gold.net/party.html"></a></li[/URL]>
<li ><a class="contactus" href="[URL]http://www.events4gold.net/contactus.html"></a></li[/URL]>
</ul>


Sign In
Create Account


Back to top









