navbar-default.php | style: readable | opt: | align: | pos:
Bootstrap navbar by default does not employ a hover effect to display the dropdown menu. The following are a group of CSS and JavaScript methods to make hover work on desktop computers and 2:1 devices when using a mouse.
The styles, cerulean thru yeti, are all adapted from and credited to https://bootswatch.com/.
The problem: With core navbar you have to click once to activate the dropdown menu and a second to close it or click to another menu item. It's an extra click for non-touchscreen devices, however is necessary on touchscreen because there is no 'hover' state in touchscreen mode.
If you set the top-level button to be a link, this would be fine on regular computers because you can hover to reveal the dropdown menu and click on the top item to visit that page. However, setting the same on touchscreen would mean clicking on the menu item would take you directly to the page and not reveal any submenu items. It's a conundrum.
Setting a top-level menu item as an activator only (a href="#") is the only choice that works for all device types.