title: Highlight the current page in the menu bar
body: <p>How can I change the menu color when the page is selected? </p>
  
  <p>Example:</p>
  
  <blockquote>
    <p>home faq contact_us</p>
  </blockquote>
  
  <p>I want to show which page is selected in the menu bar. I'm using CSS but not sure how to go about this.</p>
  
  <p>My CSS code:</p>
  
  <pre><code>.menu { 
      float: left;
      margin: 0px 0 0 0;
       width: 1000px;
       } 
      .menu li {  
       border-left: 1px solid #fff;
       float: left;
       line-height: 1em;
       text-align: center;} .menu li a {  color: #fff;
       display: block;
       font: 17px Arial, Helvetica, sans-serif;
       padding: 0px 31px;     
       line-height:47px;
       text-decoration: none;
        } 
     .menu li a span {display:block; padding:0px 15px;} 
     .menu li a:hover, .menu  .active a{color:#fff;
      background:#ed1f26 url(images/menuleft.jpg) left top no-repeat;
      width:auto;  
     } 
      .menu li a:hover span, .menu .active a span
     {background: url(images/menuright.jpg) right top no-repeat;
      padding:0px 14px; 
      border:1px solid #b3c302;
    }
  </code></pre>