I have a JavaScript rollover switch issue - when I click on the link, the color should stay orange (#f7931d), but it reverts back to grey. What am I missing in my code?
CSS:
#content-slider {
padding-top:5px;
height: 240px;
width: 359px;
padding-left: 52px;
font-family: 'Century Gothic';
font-size: 11px;
color: #BBBDC0;
display:inline-block;
padding-bottom:25px;
overflow: hidden;
}
#content-slider-inside {
list-style: none;
height: 240px;
overflow:hidden;
overflow-y: hidden;
}
#content-slider-inside li {
height: 340px;
width: 359px;
font-family: 'Century Gothic';
font-size: 11px;
color: #BBBDC0;
display:inline-block;
padding-bottom:25px;
}
#navigation {
font-family: 'Century Gothic';
font-size: 14px;
color: #BBBDC0;
display: inline-block;
width: 940px;
height: 18px;
text-transform: uppercase;
padding-left: 45px;
padding-top: 20px;
padding-bottom:10px;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
}
#navigation li {
color:#bbbdc0;
display:inline-block;
padding:5px;
text-decoration: none;
}
#navigation li a, #navigation li a:link, #navigation li a:visited {
color:#bbbdc0;
display:inline-block;
text-decoration: none;
}
#navigation li a.selected, #navigation li a.selected:link, #navigation li a.selected:visited, #navigation li a.selected:active {
color:#f7931d;
display:inline-block;
text-decoration: none;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active, #navigation li a:focus:active {
display:inline-block;
text-decoration: none;
color:#f7931d;
}
HTML:
<ul id="navigation">
<li><a href="#overview">overview</a></li>
<li><a href="#features">features</a></li>
<li><a href="#resumemanagement">resume management</a></li>
<li><a href="#financials">financials</a></li>
<li><a href="#tracking">expense tracking</a></li>
<li><a href="#search">search</a></li>
</ul>
The remaining code consists of tags and anchors for when the link is clicked.
<div id="content-slider">
<ul id="content-slider-inside">
<li id="overview">
text
</li>
<li id="features">
text
</li>
<li id="resumemanagement">
text
</li>
<li id="financials">
text
</li>
<li id="tracking">
text
</li>
<li id="search">
text
</li>
</ul>
</div>