Use pure CSS to implement a drop-down menu that appears after the mouse passes over it. Example explanation (with code)

Open any website on the Internet, and you will find that these websites have navigation parts, and some navigations will have drop-down menus after the mouse passes over them. So how to make such drop-down menus? In fact, you can use pure CSS to create a navigation drop-down menu. Next, let’s talk to you about how to make a drop-down menu with CSS. OK, let’s get to the point.

HTML part:
1. We can use any HTML element to open the drop-down menu, such as: or a element
2. Use container elements (such as < ;div>) to create the content of the dropdown menu and place it wherever you want.
3. Use

elements to wrap these elements, and use CSS to style the drop-down content.
CSS part:
1. .dropdown uses position:relative, which will set the content of the drop-down menu to be placed in the lower right corner of the drop-down button (using position:absolute).
2. .dropdown-content is the actual drop-down menu. It is hidden by default and will be displayed after the mouse moves to the specified element. Note: If you want to set the drop-down content to be the same width as the drop-down button, set width to 100%.
3. The :hover selector is used to display the drop-down menu when the mouse is moved over the drop-down button.

Example: Use pure CSS to make a navigation drop-down menu. The drop-down menu appears when the mouse passes over it

HTML code:

<p>纯CSS实现鼠标移动到按钮上打开下拉菜单。</p>
  <div class="dropdown">
   <button class="dropbtn">下拉菜单</button>
   <div class="dropdown-content">
    <a href="#">菜单1</a>
    <a href="#">菜单2</a>
    <a href="#">菜单3</a>
   </div>
  </div>

CSS part:

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
   }   
   .dropdown {
    position: relative;
    display: inline-block;
   }
   .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   } 
   .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
   }   
   .dropdown-content a:hover {
    background-color: #f1f1f1
   }  
   .dropdown:hover .dropdown-content {
    display: block;
   }   
   .dropdown:hover .dropbtn {
    background-color: #3e8e41;
   }

Look at the effect picture:

The above example shows how to make a drop-down menu using pure CSS. In the actual project, you can set the required style as needed. !

The above is the detailed content of Use pure CSS to implement a drop-down menu that appears after the mouse passes over it. Example explanation (with code). For more information, please follow other related articles on the PHP Chinese website!