title: How to Highlight active menu in css
body: <p>I have a top menu that looks like as below:
  <img src="https://i.stack.imgur.com/D4RyNl.png" alt="enter image description here"></p>
  
  <p>But when I select the home or any other items I want it to be highlighted. That is when it is active I want it to have just a different color than the others.</p>
  
  <p>My menu css is as below:</p>
  
  <pre><code>#cssmenu_top{ height:37px; display:block; padding:0; margin: 0;  border:1px solid; border-radius:5px; } 
  #cssmenu_top &gt; ul {list-style:inside none; padding:0; margin:0;} 
  #cssmenu_top &gt; ul &gt; li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
  #cssmenu_top &gt; ul &gt; li &gt; a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
  #cssmenu_top &gt; ul &gt; li:first-child &gt; a{border-radius:5px 0 0 5px;} 
  #cssmenu_top &gt; ul &gt; li &gt; a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
  #cssmenu_top ul li.has-sub:hover &gt; a:after{top:0; bottom:0;} 
  #cssmenu_top &gt; ul &gt; li.has-sub &gt; a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
  #cssmenu_top &gt; ul &gt; li.has-sub:hover &gt; a:before{top:19px;} 
  #cssmenu_top ul li.has-sub:hover &gt; a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
  #cssmenu_top ul li.has-sub:hover &gt; ul, #cssmenu_top ul li.has-sub:hover &gt; div{display:block;} 
  #cssmenu_top ul li.has-sub &gt; a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
  #cssmenu_top ul li &gt; ul, #cssmenu_top ul li &gt; div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
  #cssmenu_top ul li &gt; ul{width:200px;} 
  #cssmenu_top ul li &gt; ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
  #cssmenu_top ul li &gt; ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 
  
  
  #cssmenu_top, #cssmenu_top &gt; ul &gt; li &gt; ul &gt; li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); } 
  #cssmenu_top{border-color:#000;} 
  #cssmenu_top &gt; ul &gt; li &gt; a{border-right:1px solid #000; color:#fff;} 
  #cssmenu_top &gt; ul &gt; li &gt; a:after{border-color:#444;} 
  #cssmenu_top &gt; ul &gt; li &gt; a:hover{background:#111;}
  </code></pre>
  
  <p>And the way I am showing menu on my page is like as below:</p>
  
  <pre><code>&lt;div id="cssmenu_top"&gt;
  
          &lt;ul&gt;
              &lt;li &gt;&lt;a href="index.php"&gt;&lt;span style="text-color:#FF0000;"&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
              &lt;li class='has-sub'&gt;&lt;a href="#"&gt;&lt;span&gt;Add New Question&lt;/span&gt;&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="add_question.php?sub=bangla"&gt;Bangla&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="add_question.php?sub=english"&gt;English&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="add_question.php?sub=math"&gt;Math&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="add_question.php?sub=generalscience"&gt;General Science&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="add_question.php?sub=bangladeshaffairs"&gt;Bangladesh Affairs&lt;/a&gt;&lt;/li&gt;
                      &lt;li class='last'&gt;&lt;a href="add_question.php?sub=internationalaffairs"&gt;International Affairs&lt;/a&gt;
  
                      &lt;/li&gt;
                  &lt;/ul&gt;
  
              &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So for highlighting(active) I tried adding the following code in my css: </p>
  
  <pre><code>#cssmenu_top ul &gt; li.active{
      background-color: #FF0000;
  }
  </code></pre>
  
  <p>But it is not giving the output I want.</p>
  
  <p>How can I do that. Help please.</p>