2

我有这个 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>

演示页面

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

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

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

但是当“悬停”时，谷歌浏览器并没有真正应用 0 的上边距，您可以在我制作的演示页面上注意到。只需在链接上悬停几次，您就会注意到元素没有放回正确的位置。

我该如何解决？出于更复杂的原因，我需要保留 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;
}
4

1 回答 1

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

于 2012-09-24T17:25:17.077 回答