May 03, 2021 CSS
Use CSS to create a mouse to move up and display the effect of the drop-down menu.
When the mouse moves over the specified element, a drop-down menu appears.
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.
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:
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.