css - CSS 水平弹出菜单 - 定位弹出

Question

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

滑出前主菜单下的弹出菜单

这是滑出后的样子：

从主菜单下滑出后弹出菜单

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

我得到的最接近的是从左边开始：-100%，但这使它离左边太远了，所以在你看到弹出菜单从主菜单下方开始出现之前会有一段延迟。

score 0 · Accepted Answer

你还没有说你是如何设置元素的宽度（以像素或百分比，或者你有什么），但基本上你只需要从更宽的宽度中减去瘦菜单的宽度并设置留给该值的负数。

例如，如果

.skinny {
   width: 10%;
}

然后

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

因为 50% - 10% = 40%

1 回答 1