nav1.html
Timeline
nav3.html

Navbar 2 - toggle show/hide entire menu, toggle show/hide submenus using click or hover

navbar with submenus - NOT responsive, media queries disabled, will behave as a small screen for all screen sizes.
A submenu opens by clicking on a "+" sign left to a menu, which also will have its own href target.

JavaScript version: Extend the JavaScript to toggle both entire menu and submenus.
Checkbox + checked version: Add one checkbox to toggle each submenu.
Checkbox + focus version: (non-functional) Use one checkbox to toggle show/hide the entire menu, focus to toggle show/hide submenus.
Checkbox + hover version: Use one checkbox to toggle show/hide the entire menu, hover to toggle show/hide submenus.
Checkbox + hover + checkbox version: Use one checkbox to toggle show/hide the entire menu, hover to toggle show/hide submenus, checkbox to "pin" hovered menus.

multimenu navbar - no style, no toggle, only here to show the HTML

<ul>
  <li><a href="#index">Logo (ALWAYS SHOW ME)</a></li>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a><a href="#toggle">+</a>
    <ul>
      <li><a href="#news1">News 1</a></li>
      <li><a href="#news2">News 2</a></li>
      <li><a href="#news3">News 3</a><a href="#toggle">+</a>
        <ul>
          <li><a href="#news31">News 31</a></li>
          <li><a href="#news32">News 32</a><a href="#toggle">+</a>
            <ul>
              <li><a href="#news321">News 321</a></li>
              <li><a href="#news322">News 322</a></li>
              <li><a href="#news323">News 323</a></li>
              <li><a href="#news324">News 324</a></li>
            </ul>
          </li>
          <li><a href="#news33">News 33</a></li>
          <li><a href="#news34">News 34</a></li>
        </ul>
      </li>
      <li><a href="#news4">News 4</a></li>
    </ul>
  </li>
  <li><a href="#contact">Contact</a><a href="#toggle">+</a>
    <ul>
      <li><a href="#contact1">Contact1</a></li>
      <li><a href="#contact2">Contact2</a></li>
      <li><a href="#contact3">Contact3</a></li>
      <li><a href="#contact4">Contact4</a></li>
    </ul>
  </li>
  <li><a href="#about">About</a></li>
  <li>☰ (ALWAYS SHOW ME)</li>
</ul>
HTML rendered, no CSS:

multimenu navbar - javascript toggle

This navbar has two Javascript functions, toggleAll() to show/hide the entire menu, and toggleMe() to show/hide a submenu.
Note that toggleMe() does not collapse other, previously expanded submenus, so this version works better as a file tree explorer than a navigation menu.


multimenu navbar - checked toggle

The checkbox version has the same behaviour as the Javascript version.
Expanding one menu by clicking a checkbox (or its '+' label) in one menu does not collapse other, previously expanded submenus.


multimenu navbar - focus toggle

The focus version has an identical HTML layout as checkbox version, but using the :focus pseudoclass instead of :checked.
This menu has a weird behaviour, and does not work at all.


multimenu navbar - hover toggle

This navbar uses the :checked pseudoclass to toggle show/hide the entire menu, and the :hover pseudoclass to toggle show/hide submenus.
This navbar works quite well on touch screens. The behaviour on touch screens is similar to the "checked" navbar, as the menu stays expanded after touching a submenu, and is collapsed when another submenu is touched.


multimenu navbar - hover + checked toggle

This navbar uses the :checked pseudoclass to toggle show/hide the entire menu, and the :hover pseudoclass to toggle show/hide submenus.
Each submenu can also be "pinned" clicking its own checkbox (not perfect, as child menus must "pin" both themselves and all their "parent checkboxes").

And the toggle submenus winner is... checkbox or hover? Or "checkbox-pinned hover"?

Conclusion:
Toggle show/hide submenus using the :checked pseudoclass (in the "checked" navbar) using click/touch is always user-friendly, and the only available behaviour for touch screens.
On desktops, hover over nested submenus may give the feeling of fast navigation access, and thus more user-friendly.
The advantage of the :hover pseudoclass in the "hover" navbar is that it works out-of-the-box for both desktops (hover behaviour) and touch screens (click behaviour).
Combining :hover and :checked makes submenus "pinnable", which may be a consider user-friendly (some JavaScript may be used to improve the "pinnable" behaviour).
Adding some JavaScript may, including a checkbox for each submenu, offer the desktop user to switch between hover and click behaviour, which may be appreciated by desktop-with-touch-screen users.

nav1.html
Timeline
nav3.html