title: Highlight Selected Tab in ASP.Net Menu
body: <p>I am trying to hightlight with different color the selected tab in ASP.NET menu.  It seems simple to do this but first I am not able to make it to work, and second I cannot find a good working example so far.</p>
  
  <p><strong>ASP/HTML</strong></p>
  
  <pre><code>&lt;div class="clear hideSkiplink"&gt;
                  &lt;asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="False"
                      IncludeStyleBlock="false" Orientation="Horizontal"&gt;
  
                      &lt;Items&gt;
                          &lt;asp:MenuItem NavigateUrl="~/ReadMe.aspx" Text="Read Me" /&gt;
                          &lt;asp:MenuItem NavigateUrl="~/Summary.aspx" Text="Summary" /&gt;
                          &lt;asp:MenuItem NavigateUrl="~/Detail.aspx" Text="Detail" /&gt;
                      &lt;/Items&gt;
                  &lt;/asp:Menu&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>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: #465c71;
      border: 1px #4e667d solid;
      color: #dde4ec;
      display: block;
      line-height: 1.35em;
      padding: 4px 20px;
      text-decoration: none;
      white-space: nowrap;
  }
  
  div.menu ul li a:hover
  {
      background-color: #bfcbd6;
      color: #465c71;
      text-decoration: none;
  }
  
  div.menu ul li a:active
  {
      background-color: #465c71;
  
      color: #cfdbe6;
      text-decoration: none;
  }
  </code></pre>