javascript - 以悬停工具提示样式的子导航为中心不起作用

Question

正如你在这里看到的；http://bit.ly/sifpz9，当悬停在主导航中的“最新消息”或“附件”上时，工具提示样式的子导航下拉菜单完美居中。但是，当您将鼠标悬停在“衣服”上时，它不会居中。

我已经尝试重新定位，但是它只是不适用于导航“服装”而不会破坏其他两个。

有更好的解决方案或修复方法吗？

谢谢！

Answer 1

这很容易使用以下 CSS 实现。

#top-menu ul ul {
    margin-left: -87.5px;
    left: 50%;
    }

我们使用 87.5px 的负边距，因为你的 ul 宽度是 175px，因此给了我们 ul 宽度的一半，然后我们将它向左移动 50%，使其位于你 li 的锚标记的中间。

我希望这是有道理的。任何问题发表评论，我会尽快回复您。

Answer 2

实际上，子菜单以“What's new”和“Accessories”为中心只是一个巧合，但它们实际上看起来是居中的。问题是您做错了，为内部子菜单定义了left固定的样式位置。-31px

但是由于这些子菜单的宽度是固定的，你可以使用一个老技巧来依赖它：

#top-menu ul ul {
    left: 50%;
    margin-left: -88px;
}

这会将子菜单移动到<li>元素的中心，然后返回到其大小的一半（或多或少）的左侧。