make hover on <li>item</li> change text colour too... CSS trick?

Question

I have some menu bars, and at the moment, the Background changes to black when hovering over an

 <li>content</li>

and the text changes from black to white when it is hovered over.

I need to make it so the text color changes when the whole <li>content</li> is hovered, not just when the the text is highlighted.

here is the css

 <style type="text/css">
    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 > 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 > 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 > li:hover ul {
display:block;
color: #FFF;
 }
    #dock > 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 > 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;
 }
</style>

and here is the HTML

 <li id="Menu">
             <ul class="free">
               <li class="header"><a href="#" class="dock">DOCK</a><a href="#"      class="undock">UN-DOCK</a></li>
                 <li> </li>
               <li class="header">CAMPAIGNS</li>
                 <li><a href="#">Link Data</a></li>
                 <li><a href="#">Search</a></li>                
                 <li><a href="#">Summary Sheet</a></li>                                
               <li><a href="#">Add New Client</a></li>
               <li class="header">LINKS</li>
                 <li><a href="#">Record Transactions</a></li>
               <li class="header">REPORTS</li>
                 <li><a href="#">Handover Sheets</a></li>
                 <li><a href="#">Handover Summary</a></li>
               <li class="header" >MAINTENANCE</li>
                 <li><a href="#">Logout</a></li>
                 <li><a href="#">Manage Users</a></li>                
           </ul>
         </li>

Thanks in advance if you are able to help

Regards

Henry

Answer 1

I'd recommend making the hover work on the 'A' elements instead of the LI elements.

In order to make the LI elements flly clickable you need to set the 'A' element within it to display:block (or inline-block) as 'A' tags are display:inline by default.

SO...

<ul>
 <li><a href="#">My Link</a></li>
</ul>

ul li a {
 display:block;
}

ul li a:hover, ul li a:focus {
 color:red;
}

Answer 2

I found that if you use padding for the "a" instead of the "li" it works well. By blocking out the padding you can then hover over the padded area within the div and the "a" links inside (that are padded) will hover a color of their own.

ul li a{
color:#ead6b7;
display:block;
text-decoration:none;
padding:16px;
}

ul{
list-style-type:none;
}

li{
display:inline-block;
}

ul li a:hover{
color:#332419;
display:block;
text-decoration:none;
}

li:hover{
background-color:#ead6b7;
}