In CSS, set this divs display to none, its position to absolute, and its width to 100%. This will ensure the dropdown content appears right below the dropdown button and is the same width as the button. Also, set the overflow property to auto to enable scroll on small screens. Finally, the box-shadow property is defined to make the dropdown content stand out against the background.
Heres the CSS:
To ensure the dropdown content actually shows on hover, you need to specify the divs display property with the pseudo-class :hover. This defines a special state of the element in this case, how it appears when a user is hovering over it.
Heres the CSS:
Without any styling, the links inside the dropdown menu would be bright blue and underlined, with no spacing in between. To make them look better, lets set the font color to black, the padding property to 5px, and the text decoration property to none.
Heres the CSS:
You can also style the links to appear differently on hover using the pseudo-class :hover. Say, you want the text and background color of a link to change when a user hovers over it.
Heres the CSS:
Heres the code all together and the result:
See the Pen Hoverable Dropdown Menu with Links by Christina Perricone [@hubspot] on CodePen.
In the examples above, users could only select one option from the dropdown menu. You can create a menu that allows users to select multiple options. This is called a multiselect dropdown. To create a multiselect dropdown, you will need HTML, CSS, and Javascript.
Heres an example created by game and app developer Charlie Walter. Notice that he uses a form element.
See the Pen Multiselect [dropdown] by Charlie Walter [@cjonasw] on CodePen.
Now that you know how to create some different types of dropdown menus, youre ready to move onto the next stage: web accessibility. Dropdown menus must be accessible so that all visitors including those with disabilities can browse your site, submit forms, and so on.
To learn about the fundamentals of drop-down menu accessibility, check out How to Create Drop-Down and Fly-Out Menus That Are Web-Accessible.
Topics:
HTML