Forum Moderators: not2easy
I have an image sprite that i use for a horizontal navigation menu. I have no problems using the following code to get a hover working but i have no clue how to implement having the "current" page as the same color as the "hover" state.
Heres my code.
HTML
<ul id="topheader">
<li id="topheader01"><a href="#"><span>Home</span></a></li>
<li id="topheader02"><a href="#"><span>Home</span></a></li>
<li id="topheader03"><a href="#"><span>Portfolio</span></a></li>
<li id="topheader04"><a href="#"><span>Pricing</span></a></li>
<li id="topheader05"><a href="#"><span>Contact</span></a></li>
</ul>
CSS
#topheader {
background : url(../images/truheader.gif) no-repeat;
width : 900px;
height : 129px;
top : 0;
padding : 0 0;
}
#topheader span {
display : none;
}
#topheader li, #topheader a {
height : 129px;
display : block;
}
#topheader li {
float : left;
list-style : none;
display : inline;
}
#topheader01 {
width : 466px;
}
#topheader02 {
width : 97px;
}
#topheader03 {
width : 116px;
}
#topheader04 {
width : 97px;
}
#topheader05 {
width : 105px;
}
#topheader01 a:hover {
background : url(../images/truheader.gif) no-repeat 0 -129px;
}
#topheader02 a:hover {
background : url(../images/truheader.gif) no-repeat -466px -129px;
}
#topheader03 a:hover {
background : url(../images/truheader.gif) no-repeat -563px -129px;
}
#topheader04 a:hover {
background : url(../images/truheader.gif) no-repeat -679px -129px;
}
#topheader05 a:hover {
background : url(../images/truheader.gif) no-repeat -776px -129px;
}
What do i need based on my code to get the current page to be highlighted with the same positioning as the hover? Any help is greatly appreciated.
