title: Problem while Implemented :active in CSS Button
body: <p>I have problem while make menu using CSS. The problem is I would like to use :active to make my current button highlighted. But after tried so many times, I still can't find how to implement it in my code.</p>
  
  <p>I use <code>&lt;li&gt;</code> tag inside <code>&lt;a&gt;</code> tag to make sure the button background and text color change while selected, because after tried to put <code>&lt;a&gt;</code> tag outside <code>&lt;li&gt;</code> tag the text color not changed when select the button, the text only change after I put the cursor into the text.</p>
  
  <p>Need your help.</p>
  
  <p>This is my CSS code:</p>
  
  <pre><code>a, body {
      margin-top:-30px;
      text-decoration:none;
  }
  
  #topmenu {
      margin-left:170px;
      cursor:pointer;
  }
  
  #topmenu li {
      color:white;
      list-style:none;
      float:left;
      margin-right:5px;
      padding:20px 15px 10px 15px;;
      box-shadow:1px 1px 1px grey;
      -webkit-box-shadow:1px 1px 1px grey;
      -moz-box-shadow:1px 1px 1px grey;
      -moz-border-radius-bottomleft:5px;
      -moz-border-radius-bottomright:5px;
      border-bottom-left-radius:5px;
      border-bottom-right-radius:5px;
      -webkit-border-bottom-left-radius:5px;
      -webkit-border-bottom-right-radius:5px;
      background: -moz-linear-gradient(100% 100% 90deg, #2F2727, #004890);
      background: -webkit-gradient(linear, left top, left bottom, from(#004890), to(#2F2727));
      text-shadow: 1px 1px 1px #555;
  }
  
  #topmenu li:hover, #topmenu li:active
  {
      background: -moz-linear-gradient(100% 100% 90deg, #FED93A, #FEC13A);
      background: -webkit-gradient(linear, left top, left bottom, from(#FEC13A), to(#FED93A));
      color:black;
      padding-top:30px;
  }
  
  #topmenu #home {
      margin-right:10px;
  }
  
  #topmenu #logout {
      background:#000;
      color:white;
  }
  </code></pre>
  
  <p>and this my HTML code:</p>
  
  <pre><code>&lt;div id="topmenu"&gt;
   &lt;ul&gt;
    &lt;img src="includes/menu/pics.gif" alt="" style="float:left;"/&gt;
    &lt;a href="../folder/home.php"&gt;&lt;li id="home"&gt;Home&lt;/li&gt;&lt;/a&gt;
    &lt;a href="../folder/A.php"&gt;&lt;li&gt;A&lt;/li&gt;&lt;/a&gt;
    &lt;a href="../folder/B.php"&gt;&lt;li&gt;B&lt;/li&gt;&lt;/a&gt;
    &lt;a href="../folder/C.php"&gt;&lt;li&gt;C&lt;/li&gt;&lt;/a&gt;
    &lt;a href="../"&gt;&lt;li id="logout"&gt;Logout&lt;/li&gt;&lt;/a&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>