CSS Dropdowns

Introduction to CSS Dropdowns

Dropdown menus are commonly used for navigation and can be created and styled with CSS.

Basic Structure of Dropdowns

• Wrap dropdown content inside a div element.
• Use the :hover pseudo-class to toggle visibility.

Example

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
}
.dropdown:hover .dropdown-content {
    display: block;
}
        

Browser Support

Supported by all modern browsers.