ASP.NET MVC page, CSS (?) problem

I have an ASP.NET MVC site (Master Page + Content pages). On the master page, I have a menu. When some of the options are selected on the menu, it brings you to the appropriate controller and shows the page, which is fine, but it also shows a submenu. The submenu shows just fine, but the issue lies in the menu. I cant get the menu's css to work for me.

Here's the menu code:

<ul id="menuDeveloper">
    <li><%= Html.ActionLink("Home", "Index", "Home", new { area = (String)null }, null)%></li>
    <li id='idcardselect'><%= Html.ActionLink("IDCard", "Index", "IDCardSelect", new { area = "IDCard_Select" }, null)%></li>
    <li><%= Html.ActionLink("Groups", "Index", "GroupSetup", new { area = "Group_Setup" }, null)%></li>
</ul>

Here is the CSS that goes with it:

    ul#menuDeveloper{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 93%;
  float: right;
  background: url("images/bg-menu.gif") no-repeat 50% -9px;
  margin-right: 22px;
  margin-top:  6px;
  height: 46px;
  width: 541px;
 }
  ul#menuDeveloper li{
   float: left;
   margin-left: 20px;
   margin-top: 10px;
  }
   ul#menuDeveloper li a{
    color: #6192c1;
    padding: 10px 2px 15px 2px;
    text-decoration: none;
    text-transform: uppercase;
    height: 46px;    
   }
    ul#menuDeveloper li a.active{
     background: #e0e0e0;
     color: #1f67a7;
    }
    ul#menuDeveloper li a:hover{
     background: #e0e0e0;
     color: #1f67a7;
    }

    ul#menuDeveloper li.menuidcardactive
    {
     background: #e0e0e0;
     color: #1f67a7;
    }

All of the CSS works just fine, EXCEPT the last part (the .menuidcardactive class). It may be the way I am applying it. Basically, what happens is that the

$("#idcardselect").attr('c开发者_运维百科lass', 'menuidcardactive');
$("#idcardselect").addClass('menuidcardactive');
$("#idcardselect").removeClass().addClass('menuidcardactive');

ul#menuDeveloper li.menuidcardactive a

ul#menuDeveloper li.menuidcardactive

ul#menuDeveloper li a