Nav

Currently I am concentrating on using HTML and CSS without Javascript or any external libraries etc to implement Navigation

There are challenges for ensuring navigation is possible using the keyboard alone.

Positioning needs to be applied so that when the dropdown appears it does not cause other content to reposition (unless that is wanted).

The dropdown list is hidden using ul {display: none;}. It is shown in response to an item in the container element of that ul being hovered or receiving focus-within. Mobiles and tablets don't have an equivalent of mouse hover, hence the need to use focus-within as well.

Note that focus-within as opposed to focus is used on the container of the dropdown list because it results in the list itself receiving focus. Thus when hyperlinks are clicked in the dropped down list the focussed state is retained.

Also, note that the dropdown list must be a child, not for example, a sibling of the element that the user clicks on to activate the dropdown. This is because focus-within will only give focus to the element itself and elements within it.

The use of focus-within and the need for the dropdown list to be the child of the element the user gives focus to in order to activate the dropdownis demonstrated in dropdown/child.html and dropdown/sibling.html.

Horizontal List of Dropdowns

See dotted-squirrel/

Hamburger Menu

This is a specific example of a dropdown. A hamburger icon is used instead of a word such as Menu or Products.

Responsive: Hamburger to Horizontal List...

Using a mobile first approach to create a hamburger menu on mobile which changes to a horizontal list, members of which, can dropdown is a challenge.