Okay, so I have a navigation bar:

  <div id="navcontainer"> <!-- ending is in footer.php -->
    <div id="navlist_left">
    <ul id="navlist">
      <li class="navlist_1"><a href="/test2/" <?php if($current_page == 'home') { ?> id="navlist_current" <?php } ?>>Home</a></li> 
      <li class="navlist_2"><a href="/test2/blog/" <?php if($current_page == 'blog') { ?> id="navlist_current" <?php } ?>>Blog</a></li>
      <li class="navlist_3"><a href="/test2/news/" <?php if($current_page == 'news') { ?> id="navlist_current" <?php } ?>>News</a></li> 
      <li class="navlist_4"><a href="/test2/reviews/" <?php if($current_page == 'reviews') { ?> id="navlist_current" <?php } ?>>Reviews</a></li>
      <li class="navlist_5"><a href="/test2/websolutions/" <?php if($current_page == 'websolutions') { ?> id="navlist_current" <?php } ?>>Web Solutions</a></li>
      <li class="navlist_6"><a href="/test2/aboutus/" <?php if($current_page == 'aboutus') { ?> id="navlist_current" <?php } ?>>About Us</a></li>
    </ul>
    </div></div>

And the following CSS:

#navcontainer ul li.navlist_1 a:hover
{
    background-color: #333;
    color: #fff;
    display: inline;
    padding: 3px 5px 3px 5px;
}

#navcontainer ul li.navlist_2 a:hover
{
    background-color: #7ACED7;
    color: #fff;
    display: inline;
    padding: 3px 5px 3px 5px;
}

#navcontainer ul li.navlist_3 a:hover
{
    background-color: #B1D524;
    color: #fff;
    display: inline;
    padding: 3px 5px 3px 5px;
}

#navcontainer ul li.navlist_4 a:hover
{
    background-color: #FFE938;
    color: #fff;
    display: inline;
    padding: 3px 5px 3px 5px;
}

#navcontainer ul li.navlist_5 a:hover
{
    background-color: #FCA02A;
    color: #fff;
    display: inline;
    padding: 3px 5px 3px 5px;
}

#navcontainer ul li.navlist_6 a:hover
{
    background-color: #FA5250;
    color: #fff;
    display: inline;
    padding: 3px 5px 3px 5px;
}

#navlist_current
{
    border-style: solid;
    /* border-color: F00; */
    border-width: 0px 2px 0px 2px;
    margin: 3px 2px 3px 2px;
}

But what I'd like to do is have the different colors of the hover's to go into their own navlist_current.

I've tried #navlist_current.navlist_1 {}, but no luck. How can this be done?

You need a separate class for each nav item applied to the <a>, so you'd need .current1, .current2, etc. and you're html would be a.current1:hover, a.current2:hover etc.

Originally Posted by LadynRed

..and you're html would be a.current1:hover, a.current2:hover etc.

Do you mean CSS?

That worked great. Thanks again ladynred

Guess you figured it out

I did