I have html code:

 

<div id="dropdown" class="rMenu">
        <ul id="middlemenu" class="rMenu-hor rMenu">
        <li><a href="page.html">Page</a></li>

        <li><a href="page1.html">Page1</a></li>
        <li><a href="page2.html">Page 2</a>

                                    <ul class="rMenu-ver ">
                                          <li><a href="page3.html">Page 3</a></li>
                                    </ul>

         </li>

         </ul>

</div>

<script type="text/javascript">
$(document).ready(function(){
   $("#dropdown a").click(function(event){
    $(this).addClass('current');
   });
 });

</script>

 

In my CSS, I have:

 

#dropdown a.current {
background-color: #ffd300;   

padding: 2px 10px;
color: #000000; 

border: 1px solid #000000;  
border-bottom: 2px solid #ffd300;
text-decoration: none;}

ul.rMenu li a
{color: #fff; /* color of text in top nav */
 border-top: 1px solid #000000;  /*several shades lighter than the background */
 border-right: 1px solid #000000; /*several shades lighter than the background */
 border-bottom: 1px solid #000000; /*same color as menu background */
 border-left: 1px solid #000000; /*several shades lighter than the background */

}

 

ul.rMenu li a
{
 padding: 2px 10px 3px; }

 

ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:focus,
ul.rMenu li a:visited,
ul.rMenu li a:active
{color: #fff;
 text-decoration: none;
}

ul.rMenu li.sfhover a:active,
ul.rMenu li:hover a:active,
ul.rMenu li:focus a:active
{
 color: #fff;
 background-color: #fff;  /* active hover color - is different than the selected link, grayed out color */
}
ul.rMenu li
{
 background-color: #0071c1; /* default background color of menu items */
}

My problem is, after I click those link, the color remains the default background color (#0071c1;).

 

Do you see any problem in my code or CSS?

 

thanks,

Sue