multimenu navbar - hover/javascript "togglehc", with media query, responsive
%%% TODO: RESPONSIVE
Adding CSS may not only beautify the navbar, but also makes it more user-friendly:
Remove list item decorations
Hide checkboxes
Links as blocks, so the entire menu item area becomes clickable
Resize "+" sign to be big enough to click/touch on any screen
Hover menu item color to easier see which item is selected
Add border to make margins/paddings visible
Media query to make main menu horizontal and always visible on desktop
HTML changes:
Embed navbars in <nav> tags
Use two separate links, "Parent" (go to link) and "▶" (expand submenu).
This separation would not be necessary if dealing only with the click behaviour of a mouse, as the submenu is displayed on hover, before clicking.
Anyhow, on touch screens, the submenu is displayed when the touching the link, not before.
In that case, the links have to been separated, so the touch screen user may choose between either going to the "parent" link or displaying the submenu.
Swapped "Plus" and "Parent" elements, so the fixed-width "Plus" element comes before the fluid "Parent" elementin the HTML code, even if the "Plus" element visually appears after the "Parent".
Adding CSS, the code grows, so for now, we will handle one navbar on each page, to keep JavaScript/CSS code to a minimum.