Question

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

element does NOT get the style, but the element gets a portion of it (just the background portion, the ‘color’ does not change). I’ve tried several methods of changing the class. I just want the

to be “active” while the submenu is shown, so the menu’s “connect” and the user understands what the submenu is for.

Here is a sample of what I have tried to change the class for the

:

$("#idcardselect").attr('class', 'menuidcardactive');
$("#idcardselect").addClass('menuidcardactive');
$("#idcardselect").removeClass().addClass('menuidcardactive');

All of these were done inside the $(window).load(function(){}); code block of the index page (of the menu item clicked on, in this case “IDCard”).

Any thoughts/solutions would be greatly appreciated.

Thanks!

Answer 1

I think the problem lies in your css. Try adding ‘a’ to the end of the last item so that you are applying that style to the anchor and not the li.

ul#menuDeveloper li.menuidcardactive a

instead of

ul#menuDeveloper li.menuidcardactive

What seems to be happening is that your style is being applied to the li (so your background gets applied) but the text color is getting overridden by

ul#menuDeveloper li a