下拉菜單內容比下拉菜單更寬

Question

我在React中創建了下拉菜單組件。我希望組件是可重用的，因此我希望它可以擴展它以填充所有容器的100％。我目前的問題是，我的下拉按鈕和我的下拉內容都有100％的寬度。下拉按鈕擴展爲填充其容器的寬度，但下拉內容擴展得更多，因爲它的位置是絕對的。

如何使下拉內容與下拉按鈕的寬度相同？

我在codesandbox上創建了一個例子。

直接鏈接：https://p34wl136rj.codesandbox.io/

鏈接編輯：https://codesandbox.io/s/p34wl136rj

Answer 1

其因在下拉菜單中有position:absolute，並獲取具有position:relative最接近父的寬度。 試試這個：

.dropdown { 
    position: relative; 
}