title: asp.NET - Problems with Static Selected Style for a Selected Page on the menu
body: <p>I am using asp.NET 4.0 with C# and have recently created a custom design for my local web application. I would like that when a page is selected, it has a different background colour (usually in plain html + css we just set a menu item as active). I tried using  but it is not working, it stays the same colour as the others. Does any one has any experience with this?</p>
  <p>Code in Site Master:</p>
  <pre><code>            &lt;h2&gt;Dashboard&lt;/h2&gt;
              &lt;asp:Menu ID=&quot;NavigationMenu&quot; runat=&quot;server&quot; CssClass=&quot;menu&quot; EnableViewState=&quot;false&quot; IncludeStyleBlock=&quot;false&quot; Orientation=&quot;Vertical&quot; &gt;
                  &lt;StaticSelectedStyle CssClass=&quot;selectedMenu&quot; /&gt; 
                  &lt;Items&gt;
                      &lt;asp:MenuItem NavigateUrl=&quot;~/Default.aspx&quot; Text=&quot;View Submissions&quot;/&gt;
                      &lt;asp:MenuItem NavigateUrl=&quot;~/Imports.aspx&quot; Text=&quot;Import&quot;/&gt;
                      &lt;asp:MenuItem NavigateUrl=&quot;~/Submission.aspx&quot; Text=&quot;Insert Submission&quot;/&gt;
                      &lt;asp:MenuItem NavigateUrl=&quot;~/Reports.aspx&quot; Text=&quot;Reports&quot;/&gt;
                      &lt;asp:MenuItem NavigateUrl=&quot;~/CurrencyMaintenance.aspx&quot; Text=&quot;Currency Maintenance&quot; /&gt;
                      &lt;asp:MenuItem NavigateUrl=&quot;~/Remittance.aspx&quot; Text=&quot;Remittance&quot; /&gt;
                  &lt;/Items&gt;
              &lt;/asp:Menu&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>/* TAB MENU   
  ----------------------------------------------------------*/
  div.hideSkiplink
  {
      background-color:#3a4f63;
      width:100%;
  }
  
  div.menu
  {
      padding: 4px 0px 4px 8px;
  }
  
  div.menu ul
  {
      list-style: none;
      margin: 0px;
      padding: 0px;
      width: auto;
  }
  
  div.menu ul li a, div.menu ul li a:visited
  {
      background-color: #FFF; /*680840*/
      border: 1px #4e667d solid;
      height: 20px;
      width: 175px;
      color: #000; /*FFF*/
      display: block;
      line-height: 1.35em;
      padding: 4px 20px;
      text-decoration: none;
      white-space: nowrap;
  }
  
  div.menu ul li a:hover
  {
      background-color: #680840;
      color: #FFF;
      text-decoration: none;
  }
  
  .selectedMenu
  {
      background-color: #680840 !important;
      color: #FFF !important;
      text-decoration: none !important;
  }
  
  div.menu ul li a:active
  {
      background-color: #680840;
      color: #cfdbe6;
      text-decoration: none;
  }
  </code></pre>
  <p>This is what it looks like on Hover, I would like a similar effect on selected.</p>
  <p><img src="https://i.stack.imgur.com/SfWOe.jpg" alt="Menu" /></p>