CSS drop-down menu
Use CSS to create the display after a move mouse on the drop-down menu effect.
Examples of the drop-down menu
Examples Demo 1
This tutorial
www.w3big.com
Examples Demo 2
Examples Demo 3
Basic drop-down menu
When the mouse is moved to the specified elements, will drop down menu appears.
Examples
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: # f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba (0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown: hover .dropdown-content {
display: block;
}
</ style>
<Div class = "dropdown">
<Span> Mouse over me </ span>
<Div class = "dropdown-content ">
<P> Hello World! </ P>
</ Div>
</ Div>
try it"
Examples of analytical
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.
Drop-down menu
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:
Examples
/ * Style drop-down button * /
.dropbtn {
background-color: # 4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/ * Container <div> - you need to locate the drop-down contents * /
.dropdown {
position: relative;
display: inline-block;
}
/ * Pulldown content (hidden by default) * /
.dropdown-content {
display: none;
position: absolute;
background-color: # f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba (0,0,0,0.2);
}
/ * Link drop-down menus * /
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/ * Following the Edit drop-down menu hover link color * /
.dropdown-content a: hover {background -color: # f1f1f1}
/ * After the Show drop-down menu hover * /
.dropdown: hover .dropdown-content {
display: block;
}
/ * When the contents of the drop-down after the drop-down button displays the modified background color * /
.dropdown: hover .dropbtn {
background-color: # 3e8e41;
}
</ style>
<Div class = "dropdown">
<Button class = "dropbtn"> drop-down menu </ button>
<Div class = "dropdown-content ">
<A href = "#"> This tutorial 1 </ a>
<A href = "#"> This tutorial 2 </ a>
<A href = "#"> This tutorial 3 </ a>
</ Div>
</ Div>
try it"
Alignment dropdown content
float: left;
float: right;
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;
More examples
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.