How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?

To create a vertical scrolling menu with a seamless switch to horizontal scrolling when the menu exceeds the screen width, you can follow these steps in Webflow:

1. Create the structure:
- Add a container div to your webpage and give it a class name, e.g., "menu-container".
- Inside the container, add a div for the vertical scrolling menu, e.g., "vertical-menu".
- Inside the "vertical-menu" div, add a div for each item in the menu, e.g., "menu-item".

2. Style the vertical menu:
- Set the "menu-container" class to have a specific height (e.g., 100vh) and width to fit your design.
- Set the "vertical-menu" class to have a fixed width (e.g., 100% of the container) and set the "overflow-y" property to "scroll" to enable vertical scrolling.

3. Style the menu items:
- Set the "menu-item" class to have the desired styling, like padding, font, and background colors.
- Set the width of each "menu-item" to 100% to ensure they take up the full width of the parent container.

4. Enable horizontal scrolling:
- Select the "vertical-menu" div and add a new class, e.g., "horizontal-menu".
- In the "horizontal-menu" class, set the "width" property to "100%" and the "white-space" property to "nowrap". This will make the menu items stay in a single row without wrapping.
- Add a custom CSS rule to the "horizontal-menu" class using the