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

Question

我有一个左主菜单，其位置固定，宽度恰好为90px。我需要一个辅助弹出菜单从左下滑到它下面。与主导航一样，它也需要具有固定的位置，但可以是可变宽度。我想使用CSS转换，所以我想在主菜单的边缘（右边缘）启动弹出菜单，这样当转换开始时，您可以立即看到辅助菜单滑出。所以这是滑出前的弹出菜单：

这里是滑出后：

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

我得到的最接近的是从左边开始：-100％，但是这太远了，所以在看到弹出窗口从主菜单下面开始出现之前有一段延迟。

Answer 1

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

例如，如果

.skinny {
   width: 10%;
}

然后

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

因为50％ - 10％= 40％

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