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

Centering on hover tooltip-style sub-nav isn't working

本文关键字：导航 为中心 不起作用 悬停 工具提示 样式      更新时间：2023-09-26

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

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

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

谢谢！

使用以下CSS很容易实现。 

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

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

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

实际上，子菜单以"新增功能"和"配件"为中心只是巧合，但它们实际上看起来居中。问题是你做错了，为内部子菜单定义了一个固定为 -31px 的left样式位置。

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

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

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

相关文章：