title: CSS Making an Active State Nav element with existing code
body: <p>Guys I am working with another person's code and was wondering how I would get the nav in question to display an 'active state'. In other words, how do I have that nav item on that page be active and show a different bg color / text color? here is the CSS and HTML, it's simple, I know... but I can't figure out how to get this active state to work.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.menu {width:100%; margin:0; padding:0;}
  .menu a.menuitem {
      font-size: 10px;
      font-weight: bold;
      color: #a7a7a7;
      display: block;
      position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
      width: auto;
      border-bottom: 1px solid #ffffff;
      margin: 0;
      padding: 4px 10px 4px 10px;
      text-decoration: none;
  }
  .menu a.menuitem:visited, .menu .menuitem:active {color:#9ca1a6; text-decoration: none;}
  
  
  
  
  .menu a.menuitem .statusicon { /*CSS for icon image that gets dynamically added to headers*/position:absolute; top:5px; right:5px; border: none;}
  .menu a.menuitem:hover {
      background: #6dd0f7;
      color: #fff;
      text-decoration: none;
  }
  
  
  .menu div.submenu { /*DIV that contains each sub menu*/ width:auto; margin:0; padding:0;}
  
  .menu div.submenu ul { /*UL of each sub menu*/ list-style-type:none; font-size:12px; margin:0; padding:0;}
  
  .menu div.submenu ul li{border-bottom:1px solid #AFAFAF; line-height:12px; margin:0; padding:0;}
  
  .menu div.submenu ul li a{display:block; font-size:12px; color:#383838; text-decoration: none; margin:0; padding:5px 10px 5px 20px;}
  
  .menu div.submenu ul li a:link {color:#383838; text-decoration:none;}
  
  .menu div.submenu ul li a:visited {color:#383838; text-decoration:none;}
  
  .menu div.submenu ul li a:active {background:#D7EEFF; color:#0164B5; text-decoration:none;}
  
  .menu div.submenu ul li a:hover {background:#D7EEFF; color:#0164B5; text-decoration:none;}
  
  
  HTML:
  
           &lt;div class="menu"&gt;
              &lt;a class="menuitem submenuheader" href="seller-account-store-profile.html"&gt;My Store Profile&lt;/a&gt;
              &lt;a class="menuitem submenuheader" href=""&gt;Messages (241)&lt;/a&gt;
              &lt;a class="menuitem submenuheader" href=""&gt;Account Settings&lt;/a&gt;
              &lt;a class="menuitem submenuheader" href=""&gt;Fees &amp; Activities&lt;/a&gt;
              &lt;a class="menuitem submenuheader" href=""&gt;Notifications&lt;/a&gt;
              &lt;a class="menuitem submenuheader" href=""&gt;Contact Support&lt;/a&gt;
            &lt;/div&gt;        
  </code></pre>