css horizontal menu styling

Question

I've been working on a horizontal menu using strictly css but have one final problem I cant seem to solve. When the user hovers over an anchor, I want to entire box to be highlighted, not just where the words end. Problem is, the highlighter line with exceed the space I want it to highlight, and if I use overflow:hidden, it also hides my third submenu! I'll attach the html and the css - I would really appreciate some help here. Thanks a lot!

<div id="navigation">
        <ul>
            <li>
          services
                <ul>
                        <li>Wills</li>
                        <li>Powers of Attorney</li>
                        <li><Real Estate Transactions</li>
                        <li>Business and Corporate</li>
                        <li>Estate Planning </li>
                        <li>Estate Administration </li>
                        <li>Employment Law</li>
                </ul>
</li>
            <li>
           resources
                <ul>
                    <li>Downloadable PDFs</li>
                    <li>Links</li>
               </ul>
          </li>
            <li>
         case studies                                       
        </li>
            <li>
           about us
                <ul>    
                    <li>The Team Concept</li>
                    <li>Community Involvement</a></li>
                    <li>Partner Profiles </a>
                        <ul>
                            <li> Gerald Bizan </li>
                            <li> D. Bromley Davis</li>
                            <li> Phillippe Sills</li>
                            <li> Marc Elley </li>
                        </ul>
                    </li>

              </ul>
          </li>
            <li>
           contact us
                <ul>
                    <li>< Contact Information</li>
                    <li> Location Map</li>
               </ul>
          </li>
    </ul>
  </div> 



//And the CSS


#navigation ul
{   font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:12.5px;
    margin:0px;
    padding:0px;
}
#navigation li
{
    float:left;
    list-style:none;
    height:10px;
    margin-top:5px;
    margin-bottom:15px;
    margin-left:1px;
}
#navigation li a
{color:#FFF;
text-decoration:none;
background-color:#4c4538;
padding:5px;}

#navigation li a:hover
{color:#FFF;
text-decoration:none;
background-color:#ad5d5c;
}






#navigation li ul /*1st submenu */
{
    position:absolute;
    display:none;
    background: url(redblock.png);
    margin-top:-90px;
}
#navigation li:hover ul 
{
display:list-item;
width:170px;
margin-top:9px;
overflow:hidden;
}


#navigation li:hover li
{
margin-top:9px;
padding:0px;

}
#navigation li li
{   padding:0px;
list-style:none;
display:list-item;
}
#navigation li li a
{color:#FFF;
text-decoration:none;
background-color:transparent;

}

#navigation li li a:hover
{
white-space:nowrap;
background-color:#900;
padding-right:170px;
    margin-bottom:200px;
}

Answer 1

Moving the background-color property from the a:hover rule to the li:hover rule will make the whole box change color, instead of just where the words end.

Answer 2

There are a few syntax errors:

<li><Real Estate Transactions</li> **should be** <li>Real Estate Transactions</li> 
<li><Contact Information</li> **should be** <li>Contact Information</li>

and the <a> tags had no beginnings here:

<li>Community Involvement</a></li>  **should be** <li><a href="#">Community Involvement</a></li>
<li>Partner Profiles </a>  **should be** <li><a href="#">Partner Profiles </a>

These should be good starting points - I'll keep looking at it.