Add color to selected <li> item / override <ul> style
- by Alana
I have navigation for which I need to set a color for the selected item. It's flat HTML and CSS.
Here's the menu code:
<ul id="top_navigation">
<li class="border_red"><a href="index.html">Home</a></li>
<li class="border_red"><a href="about.html">About</a></li>
<li class="border_red"><a href="services.html"><font color="#cf3533">Services</font></a></li>
<li class="border_red"><a href="careers.html">Careers</a></li>
<li class="border_red"><a href="news.html">News</a></li>
<li class="border_red"><a href="sitemap.html">Sitemap</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
And here's the CSS - there's the basic set up and then a class to put the pipe between the items:
#top_navigation {
width: 696px;
margin: 0px;
padding: 0 0 0 4px;
list-style-type: none;
overflow: hidden;
}
#top_navigation li {
width: auto;
height: 17px;
margin: 0px;
padding: 1px 10px 0 10px;
float: left;
}
#top_navigation li a {
margin: 0px;
padding: 0px;
display: block;
font-size: 12px;
text-align: center;
text-decoration: none;
}
#top_navigation li a:hover {
color: #cf3533;
}
This sets the pipe on the right.
.border_red {
border-right: 1px solid #d7d7d7;
}
I tried combining the two and creating a _selected style, and the pipe shows up, but I can't get the color to change for the selected.
I have to be WCAG Priorities 1,2,3-compliant, so I can't just set it manually with .
