Dropdown Menu with Caret on Top and Seamless Shadow

Design help Animations & Interactions
1

Hi all,

So I want to create a dropdown menu like so:

Screen Shot 2020-02-26 at 5.03.56 PM
Screen Shot 2020-02-26 at 5.03.56 PM636×880 9.67 KB

My issue are as follows:

  1. I can’t get the shadow to be seamless around the entire entity
  2. My interaction for opening the drop-down menu depends on overflow being set to hidden (as per the custom dropdown menu tutorial by webflow) but to have the triangle go above the top of the dropdown content container, I have to have overflow: auto. I can get around this by adding a step to the interaction that sets all the nav links and nav link dividers to display: none as the initial state and then fade them in but want to see if there’s a better solution first!

The reason I didn’t use the built in webflow drop-down menu is because in the mobile layout, I’ll have the menu oriented like this so I need to have better control over the display properties of each section:

Screen Shot 2020-02-26 at 5.09.19 PM
Screen Shot 2020-02-26 at 5.09.19 PM668×1016 19.5 KB

Thanks in advance :slight_smile:

Here is my public share link: LINK
(how to access public share link)

2

hey emary! I think in order to make sure the drop shadow from the caret doesn’t overlap the drop down menu, you just need to add a wrapper div into the drop down and place all the nav links inside. Then set the z-index to sit on top of the triangle and set the background to white. Like this:

Hope that helps!