CSS горизонтальное меню

Question

Я работал над горизонтальным меню, используя строго CSS, но у меня есть еще одна проблема, которую я не могу решить. Когда пользователь наводит курсор на якорь, я хочу, чтобы выделялось все поле, а не только там, где заканчиваются слова. Проблема в том, что строка подсветки превышает пространство, которое я хочу выделить, и если я использую overflow: hidden, она также скрывает мое третье подменю! Я приложу HTML и CSS - я был бы очень признателен за помощь здесь. Большое спасибо!

<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

Перемещение свойства background-color из правила a:hover в правило li:hover приведет к изменению цвета всего блока, а не только к концу слов.

Answer 2

Есть несколько синтаксических ошибок:

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

и теги <a> не имеют здесь начала:

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

Это должны быть хорошие отправные точки - я буду продолжать смотреть на это.