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

Specify

How do you know when a list item is "selected"? – Wherefrom

I hope this is a snippet of your HTML because an <li> but be inside a <ul> - so your #Menu should either be a <div> or make sure it's inside opening and closing <ul> – Valuer

I don't mean selected, but hovered over – Specify

li:hover always reacts on li being hovered. Make sure your li is where you think it is and has the size you think it has. – Krys

for example, hovering over "Link Data" means <BackGround goes from white to black and text goes from black to white> But hovering over <li><a href="#">Link Data</a></li> turns background to black, but doesn't link as such... Its like the HTML link of the text needs to be expanded to the whole <li>atribute</li> – Specify

Anchor elements are display:inline by default. Changing to display:block will make the anchor fill the space inside the <li>. Not sure how this will affect the rest of your layout though, without coding up a demo. – Hypnology

test.insideclients.co.uk/testmenu Here is a link to an old version of the menu bar I am playing around with... – Specify

Perhaps you want li:hover a instead of a:hover – Krys

can you see how selecting to list item changes BG, but only the text is linked.. I tried moving the <a href='#'><li> so the list item was in the link, but then the text doesnt change to white at all, but the whole List item is linked – Specify

ahh possibly, lets have a look... – Specify

Don't put <a> tags around the <li> tags, this is wrong in HTML. Keep it how you have it posted above. – Valuer

looking at the code, everything is display:block – Specify

@HenryAspden I cannot see <a> set to display:block in your code above or in the example link – Hypnology

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;
}

Salmonberry

I added the code in like so '#dock ul li a {dsiplay:block;}' no such luck – Specify

@Billy Moat - I suppose it depends on the effect that you wish to invoke. – Arian

Did you literally type it in as 'dsiplay'? If so that's wrong it should be 'display'. – Salmonberry

yes that was it @BillyMoat haha... me = total douche... thanks for everybodies help !!!! LEGENDS !! – Specify

now if any androiders fancy writing a quick activity for me that would be great haha #13232368 – Specify

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;
}

Immoderate