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

Question

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

这是滑出后的样子:

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

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

Answer 1

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

例如，如果

.skinny {
   width: 10%;
}

然后

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

因为 50% - 10% = 40%

http://jsfiddle.net/ingridly/pbgd4pqk/