CSS drop-down menu

CSS drop-down menu

Use CSS to create a mouse to move up and display the effect of the drop-down menu.

Basic drop-down menu

When the mouse moves over the specified element, a drop-down menu appears.

Instance resolution

HTML section:

We can use any HTML element to open a drop-down menu, such as: .

Use container elements (e.g., slt;div>) to create the contents of the drop-down menu and place it where you want to put it.

Wrap the elements with the elements and use CSS to style the pull-down content.

CSS section:

.dropdown class uses position:relative which sets the contents of the drop-down menu to be placed in the lower-right corner of the drop-down button (using position:absolute

.dropdown-content class is the actual drop-down menu. T he default is hidden and appears when the mouse moves to the specified element. N ote min-width is set to 160px. Y ou are free to modify it. Note: If you want to set the pull-down content to match the width of the width can set the width to 100% overflow:auto scrolled on a small screen).

We use box-shadow property to make the drop-down menu look like a "card."

:hover selector is used to display a drop-down menu when the user moves the mouse over the drop-down button.

Drop-down menu

Create a drop-down menu and allow the user to pick an item in the list:

This instance is similar to the previous one when we added a link to the drop-down list and styled it:

Down-down content alignment

float:left;

float:right;

More instances

Picture pull-down
This example shows how to add pictures to a drop-down menu.

The navigation bar pulls down
This example shows how to add a drop-down menu to the navigation bar.