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

- Christopher Hunt

Answer 1

将 a:hover 规则中的 background-color 属性移至 li:hover 规则，可以使整个框的颜色改变，而不仅仅是文字结束的位置。

- JakeParis

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>

这些应该是很好的起点 - 我会继续研究它。

- Rion Williams