CSS: CSS dropdown menu

ylbtech-CSS: CSS dropdown menu

 

1.Back to top

1、

CSS dropdown menu

Use CSS to create a drop-down menu effect when the mouse is moved up.

---

Dropdown menu example

Example demo 1

Example demo 2

---

Basic drop down menu

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

example

<style>
.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"

instance analysis

HTML part:

We can use any HTML element to open the dropdown menu, such as: <span>, or a <button> element.

Use a container element (eg: <div>) to create the content of the dropdown menu and place it wherever you want.

Use <div> elements to wrap these elements and use CSS to style the dropdown content.

CSS section:

.dropdown Class Use  position:relative, which sets the dropdown menu's content to be placed in  position:absolutethe lower right corner of the dropdown button (use).

.dropdown-content Inside the class is the actual dropdown menu. It is hidden by default and will be displayed after the mouse moves over the specified element. Note that  min-width the value is set to 160px. You can modify it however you like. Note:  If you want to set the drop-down content to be the same width as the drop-down button, you can set  width it to 100% (  overflow:auto the setting can be scrolled on small size screens).

We use  box-shadow attributes to make the dropdown look like a "card".

:hover The selector is used to display the 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 select an item in the list:

 

This example is similar to the previous example, when we add a link to the drop-down list and set the style:

example

< style > 
/* Dropdown button style */ 
.dropbtn { 
    background-color : #4CAF50 ; 
    color : white ; 
    padding : 16px ; 
    font-size : 16px ; 
    border : none ; 
    cursor : pointer ; 
}

/* Container <div> - Need to position dropdown content */ 
.dropdown { 
    position : relative ; 
    display : inline-block ; 
}

/* Dropdown 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) ; 
}

/* Dropdown menu link */ 
.dropdown-content a { 
    color : black ; 
    padding : 12px 16px ; 
    text-decoration : none ; 
    display : block ; 
}

/* Modify the dropdown menu link color after moving the mouse up */ 
.dropdown-content a:hover { background-color : #f1f1f1 }

/* Show dropdown menu after mouse over */ 
.dropdown:hover .dropdown-content { 
    display : block ; 
}

/* Modify the background color of the dropdown button when the dropdown content is displayed */ 
.dropdown:hover .dropbtn { 
    background-color : #3e8e41 ; 
} 
</ style >

< div class = "dropdown" > 
  < button class = "dropbtn" > dropdown menu </ button > 
  < div class = "dropdown-content" > 
    < a href = "#" > Rookie Tutorial 1 </ a > 
    < a href ="#" > Rookie Tutorial 2 </ a > 
    < a href ="#" > Rookie Tutorial 3 </ a > 
  </div>
</div>

try it"

---

Dropdown content alignment

float:left;

 

float:right;

If you want to set the content direction of the right-floating drop-down menu to be right-to-left instead of left-to-right, you can add the following code right: 0;

example

.dropdown-content {
    right: 0;
}

try it"

---

more examples

Image Dropdown
This example demonstrates how to add an image to the dropdown menu.

Navigation Bar Dropdown
This example demonstrates how to add a drop down menu on the navigation bar.

2、

2.Back to top

 

3.Back to top

 

4.Back to top

 

5.Back to top

1、

http://www.runoob.com/css/css-dropdowns.html

2、

 

6.Back to top

 

Author: ylbtech Source: http://ylbtech.cnblogs.com/ The copyright of this article belongs to the author and the blog garden. Reprints are welcome, but this statement must be retained without the author's consent, and a link to the original text should be given in an obvious position on the article page, otherwise Reserve the right to pursue legal responsibility.