Is there any benefit to using the flexbox solution?
The principal benefit will be more concise, easier-to-maintain code.
That's not to say there's anything wrong with position: absolute (there isn't). Just that with display: flex you can achieve more with less.
That is, once you have declared justify-content and align-items on a flex parent, you don't ...
It would help Google and other crawlers if the <head> also included:
<link rel="canonical" href="https://appropriate/url" />
content="Brief description that will appear in Google search results." />
In terms of coding style, using <br> (which should be <br />), isn't pretty.
It also indicates that ...
I wanted to know if this form is safe for my users and if it will work on most devices.
Your HTML form will definitely work on all devices. But as for being 'safe for users', that would probably depend on your backend code you are using to submit your form eg PHP. You would use PHP (or some other backend language eg Python) to handle the submitted data. The ...
all a tags have a padding of 10 according to you css. the <li> tags have anchor tags @RoTaRa's suggestion "Prefer a child combinator instead of a descendant combinator if possible: .dropdown > ul." make sure, you use !important for the new padding; i.e. padding: 0px!important;
You probably want to reset the margin and padding of li items, too.
Using float to layout elements horizontally is outdated. Using flexbox should be preferred nowadays. That would also make overflow: auto redundant.
Prefer a child combinator instead of a descendant combinator if possible: .dropdown > ul.
A dropdown on hover isn't usable on a touch ...