title: make hover on <li>item</li> change text colour too... CSS trick?
body: <p>I have some menu bars, and at the moment, the Background changes to black when hovering over an </p>
  
  <pre><code> &lt;li&gt;content&lt;/li&gt;
  </code></pre>
  
  <p>and the text changes from black to white when it is hovered over.</p>
  
  <p>I need to make it so the text color changes when the whole <code>&lt;li&gt;content&lt;/li&gt;</code> is hovered, not just when the the text is highlighted.</p>
  
  <p><strong>here is the css</strong></p>
  
  <pre><code> &lt;style type="text/css"&gt;
      body{margin:0px; font-family:Tahoma, Sans-Serif; font-size:13px;}
      /* dock */
      #dock{margin:0px; padding:0px; list-style:none; position:fixed; top:0px; height:100%; 
            z-index:100; background-color:; left:0px;}
      #dock &gt; li {width:40px; height:120px; margin: 0 0 1px 0; background-color:#;
                   background-repeat:no-repeat; background-position:left center;}
  
      #dock #Menu {background-image:url(Menu.png);}
  
      #dock &gt; li:hover {background-position:-40px 0px;}
  
      /* panels */
      #dock ul li {padding:5px; border: solid 0px #879b17;}
      #dock ul li:hover {padding:5px;
  background:#879b17 url(item_bkg.png) repeat-x;
  border: solid 0x #879b17;
  font-weight: bold;
  color: #000;
   }
      #dock ul li.header, #dock ul li .header:hover {
  background:#fff url(header_bkg.png) repeat-x;
  border:solid 10px #879b17;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #FFF;
  font-weight: bold;
  text-align: center;
   }
  
      #dock &gt; li:hover ul {
  display:block;
  color: #FFF;
   }
      #dock &gt; li ul {position:absolute; top:0px; left:-180px;  z-index:-1;width:180px; display:none;
                     background-color:#fff; border:solid 10px #000; border-top-left-radius: 20px; border-top-right-radius: 20px; padding:0px; margin:0px; list-style:none;}
      #dock &gt; li ul.docked { display:block;z-index:-2;}
  
      .dock,.undock{}
     .undock {display:none; }
      #content {margin: 10px 0 0 60px; }
  
       body,td,th {
  color: #333;
   }
   a:link {
  color: #000;
  text-decoration: none;
   }
   a:visited {
  text-decoration: none;
  color: #000;
   }
   a:hover {
  text-decoration: underline;
  color: #FFF;
   }
   a:active {
  text-decoration: none;
  color: #FFF;
  text-align: center;
   }
       #dock #Menu .free .header .dock {
  color: #FFF;
  font-weight: bold;
   }
       #dock #Menu .free .header .undock {
  color: #FFFFFF;
   }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>and here is the HTML</strong></p>
  
  <pre><code> &lt;li id="Menu"&gt;
               &lt;ul class="free"&gt;
                 &lt;li class="header"&gt;&lt;a href="#" class="dock"&gt;DOCK&lt;/a&gt;&lt;a href="#"      class="undock"&gt;UN-DOCK&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt; &lt;/li&gt;
                 &lt;li class="header"&gt;CAMPAIGNS&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;Link Data&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;Search&lt;/a&gt;&lt;/li&gt;                
                   &lt;li&gt;&lt;a href="#"&gt;Summary Sheet&lt;/a&gt;&lt;/li&gt;                                
                 &lt;li&gt;&lt;a href="#"&gt;Add New Client&lt;/a&gt;&lt;/li&gt;
                 &lt;li class="header"&gt;LINKS&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;Record Transactions&lt;/a&gt;&lt;/li&gt;
                 &lt;li class="header"&gt;REPORTS&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;Handover Sheets&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;Handover Summary&lt;/a&gt;&lt;/li&gt;
                 &lt;li class="header" &gt;MAINTENANCE&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;Manage Users&lt;/a&gt;&lt;/li&gt;                
             &lt;/ul&gt;
           &lt;/li&gt;
  </code></pre>
  
  <p>Thanks in advance if you are able to help</p>
  
  <p>Regards</p>
  
  <p>Henry</p>