The best CSS drop-down menu Tutorial In 2024, In this tutorial you can learn Examples of the drop-down menu,Basic drop-down menu,Drop-down menu,Alignment dropdown content,More examples,
Use CSS to create the display after a move mouse on the drop-down menu effect.
This tutorial
www.w3write.com
When the mouse is moved to the specified elements, will drop down menu appears.
HTML part:
We can use any of HTM, the elements to open the drop-down menu, such as: <span>, or a <button> element.
Use container element (eg: <div>) to create a dropdown menu and placed anywhere you want to put on.
Use <div> element to wrap these elements, and use CSS to set the contents of the drop-down style.
CSS part:
.dropdown
class uses position:relative
, which will set the dropdown menu content is placed in the drop-down button (using position:absolute
) in the lower right corner position.
.dropdown-content
class is the actual drop-down menu. Is hidden by default, will appear in the mouse is moved to the specified element after. Note that min-width
value is set to 160px. You can freely modify it. Note: If you want to set the drop-down and drop-down button of broadband content consistent, set the width
to% 100 ( overflow:auto
setting can scroll the small size of the screen).
We use the box-shadow
property allows the drop-down menu that looks like a "card."
:hover
selector for user drop-down menu will appear when the mouse is moved to the drop-down button.
Create a drop-down menu, and allows the user to select an item in the list:
The foregoing examples of similar instances, when we add a link in the drop-down list, and set the style:
If you want to set up drop-down menu floating right content is from right to left instead of left to right, you can add the following code right: 0;
Picture drop-down
This example demonstrates how to add a picture of how the pull-down menu.
Drop down navigation
This example demonstrates how to add a drop-down menu on the navigation bar.