Absolutely no javascript/jQuery or any other progamming language, just CSS.

This demonstration uses the same html with two different stylesheets which are switched on/off when the browser window reaches a set width.

For the horizontal menu this is shown when the width is over 900px, and the vertical menu this is shown when the browser window is less than 901px.

If you only want the vertical menu system then remove the horizontal styles and the @media queries.

HORIZONTAL MENU

The horizontal menu uses slide down animation to show the submenus and works on 'hover'. All the menu items are links, but these can be just text headings.

The text is Roboto Flex variable font and is animated on hover to become taller and bolder without increasing the text width.

The arrows are just borders with transforms to look like arrows.

The submenu slide down uses display:grid to animate from 0px height to auto height.

VERTICAL MENU

For the vertical menu this works on click/tap of the hamburger icon to slide down the initial top level options and then by click/tap of the '+ icon' to the right of each menu option.

An open menu can be closed by click/tap of the '- icon'. This will close all open sub menus in that 'tree' structure.

As with the horizontal menu, the text will become taller and bolder on hover, and also to show the open structure.

Again, the submenu slide down uses display:grid to animate from 0px height to auto height.