How would you solve this dropdown menu styling issue?

Today, I worked on maintaining an old component, which is a button, when clicked, it extends a mobile menu. Due to historical reasons, its width and height can only be fixed dimensions. The goal is to add a shadow when the menu expands. How would you do it?

Here, I have listed the solutions I could think of along with their trade-offs:

1. Create a list containing the button that covers the button.
2. Calculate the width and height of the button + menu and create an empty element with a shadow hidden behind it.

Ultimately, I chose option 1. I wrote all the factors that change the button into the list button as well… very un-DRY. Why not option 2? Because calculating styles with JS is a scary thing; it’s best to avoid it.

Thanks to my colleague for telling me about the super obscure property of CSS isolation to achieve some element ordering needs.