CSS 水平弹出菜单 - 定位弹出答案

【问题标题】：CSS horizontal flyout menu - positioning the flyoutCSS 水平弹出菜单 - 定位弹出
【发布时间】：2015-05-15 06:54:14
【问题描述】：

我有一个左侧主菜单，位置固定，宽度正好 90 像素。我需要一个二级弹出菜单从它下面滑出，从左到右。像主导航一样，它也需要有一个固定的位置，但可以是可变宽度。我想使用CSS过渡，所以我想在主菜单的边缘（右边缘）开始弹出菜单，这样当过渡开始时，您可以立即看到二级菜单滑出。所以这是滑出之前的弹出菜单：

这是滑出后的样子：

我可以通过使用 left: 0 和 margin-left: 90px（左主菜单的宽度）来获得弹出菜单的最终位置。我的问题是如何使用 CSS（无 JavaScript）来获得 initial 位置（右边缘与主菜单右边缘齐平），这将允许我使用 CSS 过渡来到达最终位置。

我得到的最接近的是从左侧开始：-100%，但这使它离左侧太远了，因此在您看到浮出控件开始从主菜单下方出现之前会有延迟。

【问题讨论】：

【解决方案1】：

您还没有说过如何设置元素的宽度（以像素或百分比为单位，或者您有什么），但基本上您只需要从较宽菜单的宽度中减去瘦菜单的宽度并将左侧设置为该值的负数。

例如，如果

.skinny {
   width: 10%;
}

然后

.wide {
    width: 50%;
    left: -40%;
}

因为 50% - 10% = 40%

【讨论】：