title: MVC main menu and selected submenu
body: <p>I am creating a menu for the MVC music store application. Currently it looks like this
  <img src="https://i.stack.imgur.com/t0yDn.png" alt="As you can see I have the index view CSS selected not the About view"></p>
  
  <p>As you can see I have the Home sub level menu selected when in fact I am on the About View.</p>
  
  <p>I used Darins example for the main menu and created a helper class which looks like this.</p>
  
  
  
  <pre class="lang-cs prettyprint-override"><code>public static MvcHtmlString MenuLink(this HtmlHelper helper,
          string linkText, string actionName,
          string controllerName)
  {
      string currentAction = helper.ViewContext.RouteData.GetRequiredString("action");
      string currentController = helper.ViewContext.RouteData.GetRequiredString("controller");
  
      //modified this to work whenever a view of the controller is selected
      //if (actionName == currentAction &amp;&amp; controllerName == currentController)
      if (controllerName == currentController)
      {
          return helper.ActionLink(
              linkText,
              actionName,
              controllerName,
              null,
              new
              {
                  @class = "active"
              });
      }
      return helper.ActionLink(linkText, actionName, controllerName);
  }
  </code></pre>
  
  <p>Note I did slightly change the code as I wasn't interested in action name. I found this limited me and the main menu wouldn't add the active CSS state where I wanted.</p>
  
  <p>So that works perfect for the top level menu however I am a little stuck with the sublevel menu. My html consists of 2 UL tags like</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>    &lt;nav id="main-nav"&gt;
          &lt;ul&gt;
              &lt;li&gt;@Html.MenuLink("Home", "Index", "Home")&lt;/li&gt;
              &lt;li&gt;@Html.MenuLink("Store", "Index", "Store")&lt;/li&gt;
              &lt;li&gt;@Html.MenuLink("Cart", "Index", "ShoppingCart")&lt;/li&gt;
             &lt;li&gt;@Html.MenuLink("Admin", "Index", "StoreManager")&lt;/li&gt;
  
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  &lt;div id="page-subheader"&gt;
      &lt;div class="wrapper"&gt;
          &lt;nav id="sub-nav"&gt;
              &lt;ul&gt;
               &lt;li&gt;@Html.SubMenuLink("Home", "Index", "Home")&lt;/li&gt;
              &lt;li&gt;@Html.SubMenuLink("About", "Index", "Home/About")&lt;/li&gt;
             @*     &lt;li class="active"&gt;&lt;a href="@Url.Content("~")"&gt;Index&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="@Url.Content("~/Home/About")"&gt;About&lt;/a&gt;&lt;/li&gt;*@
              &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;input placeholder="Search..." type="text" name="q" value="" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Pretty standard HTML I have also tried to create another helper like:</p>
  
  
  
  <pre class="lang-cs prettyprint-override"><code>public static MvcHtmlString SubMenuLink(this HtmlHelper helper, 
          string linkText, string actionName,
          string controllerName)
  {
      string currentAction = helper.ViewContext.RouteData.GetRequiredString("action");
      string currentController = helper.ViewContext.RouteData.GetRequiredString("controller");
  
      if (controllerName == currentController)
      {
          return helper.ActionLink(
              linkText,
              actionName,
              controllerName,
              null,
              new
              {
                  @class = "active"
              });
      }
      return helper.ActionLink(linkText, actionName, controllerName);
  }
  </code></pre>
  
  <p>But I don't really know what to do next. If I put a break point on the code I can see <code>currentAction</code> is been returned as <code>About</code> and <code>currentController</code> is been returned as <code>Home</code>, I'm just a little unsure how to add the logic apply the active CSS class to the submenu.</p>
  
  <p>Can some please help?</p>