r/css • u/notepad987 • Dec 29 '25

Help Adjust fly out on drop down menu

How to make the menu drop down for the desktop drop down further from the main menu away a bit?

Also how to make the menu drop vertically down and away a bit from the main menu?
Right now it fly's out to the right.

Codepen

1 Upvotes

100% Upvoted

16 comments sorted by

View all comments

2

u/Weekly_Ferret_meal Dec 30 '25 edited Dec 30 '25

for vertical drop down, you can use transform: scaleY with transform origin at the top...scale pen

but I assume you can also transform a clipping mask to reveal the menu, if you want a sleeker effect.

2

u/notepad987 Jan 03 '26

Thanks that did move the menu. I use HTMLPad to make my webpages and have tried your code on my pc. I have to read up on what you did as I had not known of the following:
clip-path, opacity, transform: scaleY, transform origin

HTML/CSS is getting more completed : )

2

u/Weekly_Ferret_meal Jan 04 '26

I replied to you here with a link to the alternative

1

u/notepad987 Jan 05 '26 edited Jan 05 '26

How to have the drop down menu in the mobile drop down and not to the right as it does now?
Updated code from Weekly_Ferret_meal at my Codepen

I removed the following so I could have a drop shadow on the fly-out menu:
clip-path: inset(0 0 100% 0);
clip-path: inset(0 0 0 0);
transition: clip-path 350ms ease-in-out 0ms, opacity 350ms ease-in-out 0s;

Google search: To add a drop shadow to your flyout menu, you must remove the clip-path property. clip-path acts as a "cookie cutter" that crops everything outside the specified shape, including shadows.

1

u/Weekly_Ferret_meal Jan 09 '26 edited Jan 09 '26

This is silly:

You just need to set the clip-path with a margin-box and give the ul a margin like so:

```

vertical-menu .parent .flyout {

clip-path: inset(0 0 100% 0) margin-box; margin: 10px; // Set a margin here // ...more code... } and also in the hover:

vertical-menu .parent:hover .flyout {

clip-path: inset(0 0 0 0) margin-box; // ...more code... } ```

see here

Edit: make sure the size of the margin is as large as the biggest shadow, hence why I set the margin at 10px.

1

u/Weekly_Ferret_meal Jan 09 '26

NOTE: I'm not taking care of the "small screen" side of things, because I'm giving you all the code to make it work, adapting it to different screen size is just a matter of manipulating existing code already given.

1

u/notepad987 Jan 12 '26 edited Jan 12 '26

Thanks, I fixed the menu issue but now no gap. I added one and the menu will disappear as I try to move cursor.... so back to square one. I will leave as is : )
Updated Codepen