title: changing font color on hovering the mouse over text
body: <p>I don't know very much about css, but i'm a tid bit stuck. I want to change the color of the font to a light blue on hover. however, i want the default color to be white... how do i do this? what i have right now, has changed the default text to purple.. and underlined :S it does change the font to blue though, on the hover..</p>
  
  <p>code:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>    a:hover
  {
      text-decoration:none;
      color: #B9D3EE; 
  }
  
  .navigationBar
  {
  
      background: gray; 
      height: 50px; 
      width: 100%;
  }
  .menuOption
  {
      width:143px;
      text-align: center;  
      position: static;   
      float:left;
  
  }
  #search
  {
       position:relative; 
      font-weight: bold; 
      color: white;
      height: 27px;
      margin-left: 23px;
      left: 133px;
      top: -17px;
      margin-top: 1px;
  }
  #reports
  {
      position:relative; 
     font-weight: bold; 
      color: white;
      height: 27px;
      margin-left: 23px;
      left: 34px;
      top: -16px;
      margin-top: 1px;
  }
  #addProject
  {
       position:relative; 
       font-weight: bold; 
      color: #B9D3EE;
     height: 27px;
      margin-left: 23px;
      left: -542px;
      top: -18px;
      margin-top: 1px;
  }
  #editProject
  {
       position:relative; 
      font-weight: bold; 
      color: white;
      height: 27px;
      margin-left: 23px;
      left: -611px;
      top: -18px;
      margin-top: 1px;
  }
  #more
  {
       position:relative; 
      font-weight: bold; 
      color: white;
      height: 27px;
      margin-left: 23px;
      left: -66px;
      top: -15px;
      margin-top: 1px;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class = "navigationBar"&gt;
  
              &lt;asp:ImageButton ID="ImageButton1" runat="server" Height="18px" 
                  ImageUrl="~/g.png" style="margin-left: 1012px; margin-top: 18px" 
                  Width="23px" /&gt;
  
              &lt;div id = "search" class = "menuOption" &gt;
              &lt;a href=""&gt; Search &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div id = "reports" class = "menuOption" &gt;
              &lt;a href=""&gt; Reports &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div id = "more" class = "menuOption" &gt;
              &lt;a href=""&gt; More... &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div id = "addProject" class = "menuOption" &gt;
              &lt;a href=""&gt; Add Project &lt;/a&gt;
              &lt;/div&gt;
  
  
              &lt;div id = "editProject" class = "menuOption" &gt;
              &lt;a href=""&gt; Edit Project &lt;/a&gt;
               &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>