Menu
I am having trouble figuring out what I am doing wrong in my code. What I am wanting to do is call up one of three images, depending on whether the specified page is active or inactive, or the link is being hovered over. I am only getting the anchor image next to my text, instead of the images that I have linked in. Below is a copy of the code for both the html and css. Attached are examples of the images I am trying to link to the navigation tabs.
CSS:
[code]
#mainnav {
height: 80px;
width: 80%;
margin: auto;
background: #FFFFFF;
}
#mainnav h1 {
font-family: Britannic Bold;
font-size: 20px;
}
a#nav_league {
background-image:url(images/league.gif) no-repeat top right;
margin: 0px;
display: block;
width: 80px;
height: 0px !important;
height /**/:33px;
overflow: visible;
}
a#nav_league:hover {
background-position: 0 -36px;
text-decoration: none;
margin: 0px;
display: block;
width: 80px;
height: 0px !important;
height /**/:33px;
overflow: hidden;
}
a#nav_league.current {
background-position: 0 -72px;
margin: 0px;
display: block;
width: 80px;
height: 0px !important;
height /**/:33px;
overflow: hidden;
}
HTML
[code=html]
<div id=”mainnav”>
<h1><a id=”mainlogo” href=”/”>The Urban League</a></h1>
<a id=”nav_league” href=”/page/” class=”current”>The League</a>
<a id=”nav_programs” href=”/page/”>Programs</a>
<a id=”nav_events” href=”/page/”>Events</a>
<a id=”nav_jobs” href=”/page/”>Jobs</a>
<a id=”nav_resources” href=”/page/”>Resources</a>
</div>
[upl-file uuid=c8c9a76c-fe3e-4a14-b7a5-82c369a174c5 size=389B]league.gif
[upl-file uuid=f75d5e2f-b470-4c05-ba65-6a281684e515 size=597B]league_active.gif
[upl-file uuid=1cb056bb-082f-4ee6-9b1b-26e293999cf0 size=610B]league_hover.gif