Skip to main content

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.