多级下拉悬停状态答案

【问题标题】：Hover state of multilevel dropdown多级下拉悬停状态
【发布时间】：2015-08-19 22:44:26
【问题描述】：

我正在开发一个侧边栏导航，我被要求处理。下拉菜单有两个级别，第一级运行良好，但第二级有一个奇怪的填充问题，我无法弄清楚。我绝不是专家，所以请放轻松，我只是不明白为什么在第二层（浅蓝色区域）悬停状态没有填满整个导航区域，顶部和底部都有填充。任何帮助将不胜感激！！

Here is my JSFiddle:

    <body>
<div id="subpageContentWrapper">
    <!--page container with white background and 16px top/bottom margins-->
    <div class="subpageContent_w-subnav">
        <div class="subnavColumn">  
            <div class="subnavContainer">
                <ul>
                    <li><a href="">Employee Resources Home</a></li>
                    <li class="active"><a href="">Employee Actions</a>
                        <ul>
                            <li><a href="">Update Personal Information &amp; Benefits (HR Connect)</a></li>
                            <li><a href="">Office Personnel File (OPF)</a></li>
                            <li><a href="">Verify Employment</a></li>
                            <li class="activeSub"><a href="">Hardship Transfers</a></li>
                            <li><a href="">Part Time IRS Employment</a></li>
                            <li><a href="">Resignation / Separation</a></li>
                            <li><a href="">Outside Employment</a></li>
                            <li><a href="">Relocation</a></li>
                        </ul>                       
                    </li>
                    <li class="inactive"><a href="">Retirement</a>
                        <ul></ul>
                    </li>
                    <li class="inactive"><a href="">Benefits</a>
                        <ul></ul>
                    </li>
                    <li class="inactive"><a href="">Pay</a>
                        <ul></ul>
                    </li>
                    <li class="inactive"><a href="">Timekeeping</a>
                        <ul></ul>
                    </li>
                    <li class="inactive"><a href="">Travel</a>
                        <ul></ul>
                    </li>
                    <li class="inactive"><a href="">Credit Card Services</a>
                        <ul></ul>
                    </li>
                    <li class="inactive"><a href="">Accessibility</a>
                        <ul></ul>
                    </li>
                    <li class="inactive"><a href="">Equity, Diversity &amp; Inclusion (EDI)</a>
                        <ul></ul>
                    </li>
                    <li><a href="">Employee Rights &amp; Obligations</a></li>
                    <li class="inactive"><a href="">Employee Forms</a>
                        <ul></ul>
                    </li>

                </ul>
            </div><!-- close subnavContainer -->    

        </div><!--subnavColumn-->
</body>

【问题讨论】：

jsfiddle.net/39poj3g6/2

标签： html css menu navigation hover

【解决方案1】：

这是因为在活动部分中，<li> 上的 :hover 规则大于 <a>，但在其他部分中，<a> 上的 :hover 规则更小.

将:hover 规则添加到<li> 即可。试试这个：

.subnavContainer ul li:not(.active):hover {
    background-color: #FFF;
}

【讨论】：