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”链接位于主链接下方，并且是隐藏的。 / p>

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

但是当“徘徊”时，谷歌浏览器并没有真正应用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

谷歌浏览器奇怪的样式行为，悬停时有负余量

1 个答案: