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 .