Navigation: Submenus
Use submenus on desktop devices to allow a user to hover over an element to view sublinks pertaining to that element. A method of offering a detailed navbar without using an overwhelming number of top-level nav links.
Quick Summary
Creating Submenus: Starting with an existing button or navbar, then add html
structure for a submenu within the container. Add a CSS style rule to reveal the submenu,
applying the revealing style properties on hover of the parent link.
Navbar Submenu: A submenu built inside a navbar, intened for desktop use only.
View on Codepen.
Button Submenu: A submenu built into a button, intended for desktop, tablet, or
mobile use.
View on Codepen.
Creating Submenus
To create a submenu, start with a functioning navbar implemented as detailed in the Navbars section. Then add HTML structure for a submenu, and use CSS style rules to hide and style the navbar, as well as reveal it upon hovering the parent navbar link.
Navbar Submenu Example
To be used on desktop devices via media queries. Not intended for mobile use. View on Codepen
Button Submenu Example
To be used on desktop, tablet, or mobile devices. View on Codepen