bugl
bugl
HomeLearnPatternsPathsSearch
HomeLearnPatternsPathsSearch

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Advanced Dropdowns

Flash cards

Review the key moves

1/4
Core idea

What is the main idea behind CSS Advanced Dropdowns?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

.___-content {
3Order

Put the learning moves in the order that makes the concept easiest to apply.

CSS Dropdown Navbar
CSS Dropdown Image
CSS Right-aligned Dropdown

CSS Right-aligned Dropdown

If you want the dropdown menu to go from right to left, instead of left to right, add right: 0;

Example

Formatted code
.dropdown-content {
  right: 0;
}

Live preview

CSS Dropdown Image

How to add an image and other content inside the dropdown box.

CSS Dropdown Navbar

How to add a dropdown menu inside a navigation bar.

Previous

CSS Dropdowns

Next

CSS Image Gallery