title: preventing currently selected menu item from changing color
body: <p>whenever i hover over the currently selected menu item its color changes i want to prevent that. here my code.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt; Another Page &lt;/title&gt;
          &lt;link rel="stylesheet" href="style4.css" type="text/css" /&gt;
      &lt;head&gt;
  
      &lt;body&gt;
  
          &lt;div id="title"&gt;
  
              &lt;ul&gt;
                  &lt;li class="current"&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="content.html"&gt;Content&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="search.html"&gt;Search&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;div id="clear"&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div id="wrapper"&gt;
  
              &lt;div id="header"&gt;
  
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>and here's the css</p>
  
  <pre><code>body
  {
      padding: 0;
      margin: 0;
      background-color: rgb(24,205,20);
  }
  
  h1,h2,h3
  {
      padding: 0;
      margin: 0;
  }
  
  p
  {
      padding: 0;
      margin: 0;
  }
  
  .current
  {
      background-color: black;
  
  }
  
  
  #title
  {
      background-color: orange;   
  }
  
  #title ul
  {
  
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  #title li
  {
      float: left;
  }
  
  #title a
  {
      text-transform: uppercase;
      text-align: center;
      text-decoration: none;
      display: block;
      width: 120px;
      font-weight: bold;
      color: #ffffff;
      padding: 4px;
  }
  
  #title a:hover
  {
      background-color: rgb(180,138,18);
  }
  
  #clear
  {
      clear: both;
  }
  </code></pre>
  
  <p>need some urgent suggestions on solving this issue.</p>
  
  <p>Thank you.</p>