CSSの水平メニュースタイリング

Question

私は厳密にCSSを使用して水平メニューに取り組んできましたが、解決できないような最終的な問題が1つあります。ユーザーがアンカーにカーソルを合わせると、単語の終わりだけでなく、ボックス全体が強調表示されます。問題は、ハイライトラインがハイライトしたいスペースを超えていることです。また、オーバーフロー：hiddenを使用すると、3番目のサブメニューも表示されなくなります。私は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プロパティをルールから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> 

これらは良い出発点でなければなりません - 私は見ておこうそれ。