多级下拉悬停状态

Question

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

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

这是因为在活动部分中，您在 <li> 上有一个 :hover 规则，它比 <a> 大，但在其他部分中，您有 :hover 规则 <a> 哪个更小。

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

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

多级下拉悬停状态

Hover state of multilevel dropdown

html

css

navigation

menu

hover