0

我top: 100%用来在悬停时将子菜单下拉菜单推到主导航栏下方，但在 Firefox 中，菜单被推到菜单边框下方，导致 1px 间隙。在 webkit 浏览器中，它按我想要的方式工作，它显示子菜单，中间没有间隙。我使用 100% 来避免对值进行硬编码。

我创建了一个用于测试的代码笔。我将菜单周围的边框设置为红色，以便更容易看到问题。第二个导航只是显示悬停状态。

更新

如果没有元素display: table;，.nav-main1px 间隙就会消失，但我正在使用它，因此我可以添加display: table-cell;到导航列表项以将它们展开并填充整个导航。关于如何解决这个问题的任何想法？

html

<nav role="navigation">
    <ul class="nav-main">
        <li><a href="#">Link One</a></li>
        <li>
            <a href="#">Link Two</a>
            <ul class="sub-menu">
                <li><a href="#">Dropdown Link One</a></li>
                <li><a href="#">Dropdown Link Two</a></li>
                <li><a href="#">Dropdown Link Three</a></li>
            </ul>
        </li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
    </ul>
</nav>

scss

$pink: #ed2490;

a {
    text-decoration: none;
}

.nav-main {
    position: relative;
    display: table;
    margin: 0;
    padding: 0;
    width: 100%;
    border: 1px solid lighten(black, 22%);
    border-radius: 4px;
    background: lighten(black, 8%);
    @include background(linear-gradient(bottom, lighten(black, 8%), lighten(black, 36%)));
    font-weight: 500;
    line-height: 1;

    > li {
        display: table-cell;
        text-align: center;
        position: relative;

        &:hover {
            .sub-menu {
                top: 100%;
            }

            a {
                background: lighten(black, 18%);
                background: rgba(black, 0.25);
            }
        }
    }

    a {
        display: block;
        color: white;
        padding: 15px 10px;

        &:hover,
        &:focus {
            background: lighten(black, 18%);
            background: rgba(black, 0.25);
        }
    }

    .sub-menu { // dropdown
        position: absolute;
        top: -999px;
        z-index: 10;
        margin: 0;
        padding: 0;
        width: 200px;
        background: lighten(black, 4%);

        li {
            border-top: 1px solid lighten(black, 18%);

            &:first-child {
                border-top: 0;
            }
        }

        a:hover {
            background: $pink;
        }
    }
}

// For example only
.styleguide-dropdown {
    padding: 40px 20px 130px;
}

.nav-main {
    border-color: red;

    .psuedo-hover {
        a {
            background: lighten(black, 18%);
            background: rgba(black, 0.25);
        }

        .sub-menu {
            top: 100%;

            .psuedo-hover {
                background: $pink;
            }
        }
    }
}
4

2 回答 2

1

不寒而栗，任何带有 display: table-* 的东西本质上都很难在浏览器中保持一致的样式。

但是，这就是说，这真的不是你的问题。以下修复都有效：

.submenu { display:none;}
:hover > .submenu { display: block;}

或者

.submenu { height: 0; overflow:hidden }
:hover > .submenu { height: auto; }

并且其中任何一个对于回流/重绘/重新渲染都应该比顶部的疯狂变化更好。此外，如果您想在页面上重新使用该导航下方，它们将更加强大，而不仅仅是通过将它们发送到负顶部来“隐藏”事物。

干杯。

于 2013-03-08T21:37:37.603 回答
0

去掉周围的1px边框ul解决问题；然后您可以为每个li. 虽然border-radius不会以相同的方式计算。

我相信原因是2px 边框ul的高度超过了li2px 的高度，因此 100% 的高度li还不够……但我真的不确定这个。

这是一个工作演示：http ://codepen.io/anon/pen/jsBEt

于 2013-03-08T20:09:00.850 回答