Materialize bi-menu issue

Generally said, the below script works COMPLETELY, at first. The issue is, once hide-on-med-and-down class is added, the larger menu successfully hides, but the referenced drop-downs are no longer even accessible for the sidenav. It's the first set of items on the list that are also being hidden for some reason. Any ideas why?
Using https://materializecss.com/
Active page: BFD Scheduler Home

He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.

On Chrome, everything appears to be working correctly: on wide displays I see only the nav in the top-right, and on narrow displays I see only the menu in the top-left and it pops up the list on the left with items and subitems. Removing the hide-on-med-and-down makes the list appear even on narrow displays, which is a bad thing.

Where's the problem, exactly?

By the way, is that your actual markup? It's not quite what it should be. Couple errors. Like that ul.right being duplicated.

I figure this will work, but the 2 drop-down items are external in the script. In this example, a drop-down will appear for each menu since a separate one is made for each. If a separate set is required, I guess that is the way we'll go, but I was hoping, due to it initially being an externally referenced item to what is hidden in the first attempt, it wouldn't become hidden itself.

Currently a "final", but I was hoping to cut it in half due to the menu items truly being the same, just a desktop/mobile version of such, but it seems when the desktop become hidden, it would apply to the options as well, so it seems there must be a duplicate set created, just to be independent.

He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.

Now, if the larger becomes hidden, it is ALSO hiding the referenced items, so when the following is the list present, it can't use the items since they must be getting passed hide-on-med-and-down from the larger UL, even though they are not WITHIN. (So I think)

He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.

Aight. I set it up as hoping for, so hopefully tests will show failures/issues. I am testing it via Edge, and don't have Chrome atm to swing that test. The prior setup worked for me as well, but included twice as much, due to the independent options instead of shared.

The thing for me is, when the screen is smaller, the side menu will appear and show only the initial menu, not sub-menus. If the smaller menu is left open while enlarging the screen, the submenus will then, and only then, work for the mobile menu once the desktop menu also appears.

When you look at the mobile menu on the side, will it now show its sub-menus in this version when desktop menu is hidden?BFD Scheduler
And the 3 intended parts are...
The sub-menus:

He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.

Right. Now the hide-on-med-and-down matters because the submenus aren't being moved (like in the DOM) between the two menus. They remain under the desktop menu and are being positioned to show up in the mobile location.

a) Whatever you just did to produce the problem, undo it. When the submenus were being physically moved between menus everything was fine, but now that they're being positioned (with CSS) to the desired place it won't work.
b) Duplicate the submenus. In the markup, not with Javascript. One copy under the desktop menu, one copy under the mobile menu.

No prob. (b) is the way I've had it to successfully work. My goal, if simple, was just to avoid the duplication. Creating 2 copies has always been the only way around. Just checking to see if anyone had a suggestion to create a single structure/option build, then just swap which display version displayed those options. (Mobile or Desktop)

He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.

Take what you have now for the desktop version and discard the sidenav markup (except the icon). The desktop CSS does what it does now, and the mobile CSS shouldn't need much added so that the menu gets styled like the sidenav did. It doesn't have to move locations in the DOM for it to appear on the left side of the screen when opened. You wouldn't use hide-on-med-and-down because you don't want the stuff hidden anymore - you would change the appearance with one set of desktop/default CSS rules and another set of mobile rules.

Well, the issue is me not being familiar with the Materialize styling, since I'm used to doing it from scratch, so I've currently got it built as so, and am going to check his input/acceptance of something more written from scratch that doesn't use Materialize.
(Currently loaded as a preview/example, at this moment)

He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.