CSS Dropdowns
Dropdown menus are a common design pattern used on websites for displaying nested content, such as sub-navigation links or dropdown lists.
CSS can be used to create dropdown menus that are visually appealing and easy to use.
As an example:
Editor
Loading...
In this example:
- We have created a navigation bar using an unordered list (
ul
) and list items (li
). - Each list item contains an anchor tag (
a
) that links to a different page on the website. - The
"Services"
list item also contains another unordered list for the dropdown menu. - In the CSS code, we have styled the navigation bar to have a black background color and no bullet points (
list-style-type: none
) for the list items. - We have also set the margin and padding to 0 for the unordered list, and set the overflow property to hidden to prevent any overflow issues.
- The dropdown menu is initially hidden using the
display:none
property. - When the user hovers over the
"Services"
list item, the nested unordered list is displayed using the CSS selector"nav li:hover > ul"
. - We also set the position of the nested unordered list to
"absolute"
to ensure it appears directly below the"Services"
list item.