Absolutely no javascript/jQuery or any other progamming language, just CSS.
Also no inputs, radio, checkbox, summary/detail etc. Just focus and focus-within.

This is a simple dropdown menu that works with any number of branches and links without any change to the CSS.

The menus now work in Firefox and Safari by using @supports to check if the browser supports calc-size(auto,size). If it does support this then the CSS uses this to animate the actual height of the <ul> elements. If it does not support this then the browser uses max-height to animate the height of the the <ul> elements

The dropdown/flyout menu is also responsive and will change to a slide down tree menu when the screen width is less than 900px.

The same html code is used for both types of menu with just a change of CSS using:
@media only screen and (min-width: 901px)
and
@media only screen and (max-width: 900px).

On the dropdown menu just click/tap the text with an arrow indication to show which way the sub menu will open. You can click the same text to close that branch, click/tap another text with arrow indication.

You can also click tap anywhere off the menu to close all branches. This will also close any open sub branches.

When changed to the tree menu just click/tap the text to open and close the branches.

So a simple dropdown/flyout/tree menu using just :focus and :focus-within that will work with any menu structure without needing to change the CSS. You may want to change the colors used.