Need help with active state on menu item

Want to seperate hover & active items.

[macz_g]

I am working from the exploding boy menu code and have got this far.

What I want to do is have the background tab show up only on the active link. On hover I want to get a simple 1px white underline for the other links.

The styles are embedded in the page--> any help would be greatly appreciated.

Thanks in advance.

LR

added code:

<style>
#tabsI-QF {
float:left;
margin-left: 0px;
width:285px; height:24px;
background:#022052; background-image:url(../Images/QF-Tab-Nav-bg.png); background-repeat:repeat-x;
font-size: 12px;
line-height:normal;

}
#tabsI-QF ul {
margin:0;
padding:0px 0px 1px 0px;
list-style:none;

}
#tabsI-QF li {
display:inline;
margin:0;
padding:0;
}
#tabsI-QF a {
float:left;
background:url(../Images/QF-tableftI.gif); no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
font: bold 12px Arial, Helvetica, sans-serif;
}

#tabsI-QF a span {
float:left;
display:block;
background: url(../Images/QF-tabrightI.gif); no-repeat right top;
padding:5px 7px 5px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI-QF a span {float:none;}
/* End IE5-Mac hack */
#tabsI-QF a:hover span {
color:#01245A;
font-weight: bold;
}

#tabsI-QF a#activetab span {
background-position:100% -23px;color: #01245A;
}
#tabsI-QF #activetab, #tabsI-QF a:hover {
background-position: 0% -23px;
}
</style>

<div id="tabsI-QF">
<ul>
<li><a href="#" title="Link 1"><span>Flights</span></a></li>
<li><a href="#" title="Link 2"><span>Cars</span></a></li>
<li><a id="activetab" href="#" title="Link 3"><span>Hotels</span></a></li>
<li><a href="#" title="Link 4"><span>Vacations</span></a></li>

<li><a href="#" title="Link 5"><span>Cruise</span></a></li>
</ul>
</div>

[edited by: SuzyUK at 8:43 am (utc) on Mar. 8, 2007]
[edit reason] URL removed per TOS - code added [/edit]

[macz_g]

Thanks for the edit to the post.

Any ideas from the group?

[SuzyUK]

yes you need to remove the left tab gif from appearing on hover but still want it there for the active tab so

#tabsI-QF a#activetab span {
background-position:100% -23px;color: #01245A;
}
#tabsI-QF #activetab, #tabsI-QF a:hover {
background-position: 0% -23px;
}

remove the bit in red, that means that only the #activetab then has anything to do with the left side image

then to style the general hover links to be white with an underline

#tabsI-QF a:hover span {
color:#01245A;
font-weight: bold;
}

change the color to #fff the same as the non hover state, and add

text-decoration; underline;

and then you'll need a more specific rule for the activetab hover - you won't want it to be white and you might not want the underline for it? so something like this

#tabsI-QF a#activetab:hover span {
color:#01245A;
font-weight: bold;
text-decoration: none;
}

Suzy