html - 谷歌浏览器奇怪的风格行为，悬停时有负边距

Question

我有这个 HTML 代码:

<nav id="menu">
    <ul>
        <li>
            <a href="#">Item1</a>
            <a href="#" class="alt">Item1</a>
        </li>
        <li>
            <a href="#">Item2</a>
            <a href="#" class="alt">Item2</a>
        </li>
    </ul>
</nav>

Demo page

如您所见，这是一个菜单，每个元素都有 2 个链接。菜单是水平的，目的是在元素未悬停时隐藏“alt”链接，并在悬停时显示它。

每个<li>因此，元素是一个具有特定高度 (34px) 的框，每个链接的高度也为 34px，因此“alt”链接位于主链接下方，并且是隐藏的。

当元素悬停时，34px 的负上边距应用到主链接，使“alt”出现。

但是，当“悬停”时，Google Chrome 并没有真正应用上边距 0，您可以在 demo page 上注意到这一点。我做了。只需将鼠标悬停在链接上几次，您就会注意到元素没有放回正确的位置。

我该如何解决？出于更复杂的原因，我需要保留 2 个链接(主链接和“alt”)，演示被简化了。

供您引用，这是 CSS:

nav#menu {
    background-color: #e9e9e9;
}

nav#menu > ul {
    margin: 0;
    height: 39px;
    display: block;
    list-style-type: none;
}

nav#menu > ul > li {
    display: inline-block;
    height: 34px;
    overflow: hidden;
    width: 200px;
}

nav#menu > ul > li > a {
    display: block;
    height: 34px;
    line-height: 34px;
}

nav#menu > ul > li > a:first-child {
    margin-top: 0;
}

nav#menu > ul > li:hover > a:first-child {
    margin-top: -34px;
}

nav#menu > ul > li > a.alt {
    color: white;
    background-color: #8d8d8d;
}

Answer 1

对所有评论表示抱歉。我试图让它发挥作用，只是大声思考。这是您正在寻找的解决方案...

您需要更改其中两个样式。

/* add the overflow: hidden; to the end of this tag set */
nav#menu > ul {  .... overflow: hidden;  }  

/* replace the inline-block with float:left;*/
nav#menu > ul > li { float:left; height: 34px; overflow: hidden; width: 200px; }  

这是工作链接 jsFiddle