Sample code for making a drop-down menu using pure CSS

Introduction:
When I looked at interview questions these days, I often saw the use of CSS to implement a drop-down menu, but I found that many people were unable to do it, and finally could only reluctantly do it with JS . To be honest, I am shocked. This function is very simple to implement, and it can even be said to be an entry-level question. Why do so many people not know how to do it? So today I will share some interview tips and show you how to make a drop-down menu using CSS.

It’s still the same. Without further ado, let’s go straight to the renderings.

1. A button, before it is clicked (on a mobile phone) or when the mouse is not pointing (on a PC)

insert image description here

2. After clicking or pointing the mouse.

After clicking on the phone
Mouse pointing back

The drop-down menu can be displayed, and its implementation principle is also very simple. You only need to remember one point: hover, this attribute.

Let's jump right into the code and explain it later.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        li{
            list-style: none;
            height: 28px;
        }
        #menu{
            display: inline-block;
        }
        #menu #list {
            max-height: 0;
            transition: max-height 0.25s ease-out;
            overflow: hidden;
            background: #f5f4f4;
            width: 80px;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        #menu:hover #list {
            max-height: 200px;
            transition: max-height 0.25s ease-in;
            width: 80px;
            margin: 0;
            padding: 0;
        }
        .button{
	          height: 32px;
	          width: 80px;
	          margin-top: 6px;
	          border-radius: 4px;
	          color: #fff;
	          padding-left: 0;
	          padding-right: 0;
	          line-height: 32px;
	          background: #E33E33;
	          text-align: center;
        }
    </style>
</head>
<body>
  <div id="menu">
    <div class="button">More information</div>
    <ul id="list">
        <li>Personal Center</li>
        <li>My Blog</li>
        <li>Settings</li>
        <li>Log out</li>
        <li>Log out</li>
    </ul>
  </div>
</body>
</html>

You just need to set a div and then set it to two states, one without :hover and one with :hover. And when there is no :hover, just set the menu to be hidden (overflow: hidden;), and the rest of the code is a simple box model.

Now let’s talk about :hover. What is this thing? It is a CSS selector that is used to select the element on which the mouse pointer floats. So when the mouse is hovered or clicked on the mobile phone, this attribute will be triggered, and the drop-down menu will be displayed. At the same time, we added the transition attribute to make the drop-down menu have a gradient effect, making it feel more like it is being pulled down.

So isn’t the CSS selector magical? If used well, you don’t have to write a lot of JS code. I will make a column about CSS selectors in the future, and then introduce all CSS selectors in a systematic way.

insert image description here

Summarize

This concludes this article about using pure CSS to create a sample code for a drop-down menu function. For more relevant CSS drop-down menu content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: Semanticization of HTML tags (including H5)

>>: In-depth understanding of Vue's method of generating QR codes using vue-qr

How to Enable or Disable Linux Services Using chkconfig and systemctl Commands

Sample code for making a drop-down menu using pure CSS

How to Enable or Disable Linux Services Using chkconfig and systemctl Commands

Simplify complex website navigation

Summary of horizontal scrolling website design

Briefly describe the use and description of MySQL primary key and foreign key

Nginx reverse proxy springboot jar package process analysis

How to use Linux whatis command

My CSS framework - base.css (reset browser default style)

How to reset the initial value of the auto-increment column in the MySQL table

Detailed explanation of JS memory space

Two ways to solve the problem of MySQL master-slave database not being synchronized

Recommend

Detailed explanation of the process of nginx obtaining the real source IP after passing through multiple layers of proxy

Vue's various implementation methods for modifying parent component props through child components

Summarize the commonly used nth-child selectors

Forever+nginx deployment method example of Node site

Detailed steps to configure MySQL remote connection under Alibaba Cloud

Practical record of vue using echarts word cloud chart

A complete list of meta tag settings for mobile devices

Detailed explanation of Vue lazyload picture lazy loading example

What is em? Introduction and conversion method of em and px

CSS3 uses transform deformation combined with events to complete fan-shaped navigation

How to install MySQL for beginners (proven effective)

Essential bonus items for optimizing and packaging the front end of Vue projects

JavaScript Basics: Immediate Execution Function

NodeJS realizes image text segmentation

After restarting the Baota panel, it prompts -ModuleNotFoundError: No module named 'geventwebsocket'