Posts in current category

CSS drop-down menu


May 03, 2021 23:00 CSS


Table of contents


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

<style>
.dropdown
{
position: relative;
display: inline-block; }
.dropdown-content {
display: none;
position: absolute; }
.dropdown:hover .dropdown-content {
display: block; }
</style>

Try it out . . .

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:

Instance

<style>
/?Containers slt;div> - Need to locate pull-down content
.dropdown {
position: relative;
display: inline-block; }
/? Pull-down content (hidden by default)
.dropdown-content {
display: none;
position: absolute; }
Links to the drop-down menu . . .
.dropdown-content a {
text-decoration: none;
display: block; }
/?Mouse up and modify the drop-down menu link color . . .
.dropdown-content a:hover { background-color: #f1f1f1 }
/? Show drop-down menu after mouse moves up
.dropdown:hover .dropdown-content {
display: block; }
/? Modify the background color of the pull-down button after the pull-down content is displayed.
.dropdown:hover .dropbtn {
background-color: #3e8e41; }
</style>


Try it out . . .

Down-down content alignment

float:left;

float:right;

Instance

.dropdown-content {
right: 0; }
Try it out . . .

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.