CSS Drop-Down Menu

Basic drop-down menu

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

Example

< style >
 .dropdown { position: relative 
   ;
   display: inline-block ;
 } .dropdown-content { display: none
 
   ;
   position: absolute ;
   background-color: #f9f9f9 ;
   min-width: 160 px ;
   box-shadow: 0 px 8 px 16 px 0 px rgba ( 0 , 0 , 0 , 0.2 )     ;
   padding: 12 px 16 px  ;
 } .dropdown :hover .dropdown-content { display: block
  
   ;
 } 
</ style >
 [ mycode3 ] [ mycode3 type = " html " ] 
< div class =" dropdown "> < span >Move the mouse to me! </ span > < div class =" dropdown-content "> < p >Novice Tutorial</ p > < p > www .runoob .com </ p > </ div > </ div >

Example analysis

HTML part:

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

Use container elements (such as: <div>) to create the content of the drop-down menu and place it wherever you want.

Use <div> elements to wrap these elements, and use CSS to style the drop-down content.

CSS part:

.dropdownClass use position:relative, this will set the content of the drop-down menu in position:absolutethe lower right corner of the drop-down button (use ).

.dropdown-contentIn the class is the actual drop-down menu. It is hidden by default and will be displayed after the mouse moves to the specified element. Note that min-widththe value is set to 160px. You can modify it at will. Note: Consistent If you want to set the contents of the drop-down drop-down button width can be set widthto 100% ( overflow:autosetting can scroll the small size of the screen).

We use the box-shadowproperty to make the drop-down menu that looks 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>
/* drop-down button style*/
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

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

/* Drop-down 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 to the drop-down menu*/
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Move the mouse up and modify the link color of the drop-down menu*/
.dropdown -content a:hover { background-color: #f1f1f1 }

/* After the mouse is moved up, the drop-down menu is displayed*/
.dropdown:hover .dropdown-content {
    display: block;
}

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

< div class= "dropdown" >
  <Button class = "dropbtn" > drop-down menu < / Button >
  < div class = "DropDown-Content" >
    < A the href = "#" > novice Tutorial. 1 < / A >
    < A the href = "#" > novice Tutorial 2 < / A >
    < A the href = "#" > novice tutorial. 3 < / A >
  < / div >
< / div >

Drop-down content alignment

float:left;

float:right;

 

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

Example

.dropdown-content {
    right: 0;
}

More examples

Picture drop-down
This example demonstrates how to add pictures to the drop-down menu.

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