Question

我一直在使用严格的CSS进行水平菜单，但有一个我似乎无法解决的最终问题。当用户将鼠标悬停在锚点上时，我希望突出显示整个框，而不是单词结束的位置。问题是，突出显示的线条超出了我想要突出显示的空间，如果我使用溢出：隐藏，它也隐藏了我的第三个子菜单！我会附上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>

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

css水平菜单造型

2 个答案: