Question

我正在进行侧边栏导航我被要求继续工作。下拉列表有两个级别，第一个级别运行正常，但第二个级别有一个奇怪的填充问题，我无法弄清楚。我绝不是专家，所以请放轻松我，我只是无法弄清楚为什么在2级（浅蓝色区域）悬停状态没有填满整个导航区域顶部和底部有填充。任何帮助将不胜感激！！

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>

Answer 1

这是因为在有效部分中，:hover上的<li>规则大于<a>，但在另一部分中，您有:hover规则在较小的<a>上。

向:hover添加<li>规则，它会起作用。试试这个：

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

悬停状态的多级下拉列表

1 个答案: