CSS to achieve dynamic secondary menu

Dynamically implement a simple secondary menu

When the mouse is placed on the first-level label, the mouse will change into a small hand shape to display the second-level menu. The source code is as follows. You can copy it and use it directly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {margin: 0; padding: 0;}
        ul { list-style: none;}
        div {
            width: 100%;
            height: 50px;
            background-color: #ccc;
        }
        .first {
            width: 100px;
            height: 50px;
            float: left;
            margin-right: 70px;
            /* background-color: pink; */
            cursor: pointer;
            text-align: center;
            line-height: 50px;
            border-radius: 15px;
        }
        .second li{
            width: 80px;
            height: 50px;
            background-color: blue;
            border-radius: 50%;
            margin-top: 10px;
        }
        .second {
            display: none;
        }
        .first:hover .second{
            display: block;
            cursor: pointer;
        }
        .first:hover {
            background-color: pink;
        }
    </style>

<body>
    <div>
        <ul>
            <li class="first">
                <p>First level tag</p>
                <ul class="second">
                    <li>Second level tags</li>
                    <li>Second level tags</li>
                </ul>
            </li>

            <li class="first">
                <p>First level tag</p>
                <ul class="second">
                    <li>Second level tags</li>
                    <li>Second level tags</li>
                </ul>
            </li>
        </ul>
    </div>

</body>
</html>

Summarize

This is the end of this article about how to implement dynamic secondary menu with CSS. For more relevant CSS dynamic secondary menu content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Disabled values that cannot be entered cannot be passed to the action layer

>>: A practical record of encountering XSS attack in a VUE project

CSS to achieve dynamic secondary menu

Analyze the working principle of Tomcat

MySQL 5.7.17 installation and configuration method graphic tutorial (Ubuntu 16.04)

Detailed explanation of the pitfalls of nginx proxy socket.io service

Ubuntu 20.04 desktop installation and root permission activation and ssh installation details

Secondary encapsulation of element el-table table (with table height adaptation)

Detailed explanation of HTML table inline format

Instructions for using JSON operation functions in Mysql5.7

Detailed explanation of the role of overflow:hidden (overflow hiding, clearing floats, solving margin collapse)

6 inheritance methods of JS advanced ES6

How to quickly repair corrupted MySQL database files using the myisamchk and mysqlcheck tools

Recommend

Implementation of one-click TLS encryption for docker remote api

HTML code example: detailed explanation of hyperlinks

A detailed introduction to the CSS naming specification BEM from QQtabBar

Tutorial on installing mysql8 on linux centos7

JavaScript flow control (branching)

MySQL decimal unsigned update negative numbers converted to 0

Absolute path URL and relative path URL in html and subdirectory, parent directory, root directory

Restart the Docker service to apply the automatic start and stop command (recommended)

Getting Started with Mysql--sql execution process

A brief analysis of different ways to configure static IP addresses in RHEL8

Solution to MySQL remote connection failure

Docker build PHP environment tutorial detailed explanation

How to use CSS style to vertically center the font in the table

HTML4.0 element default style arrangement

Shorten the page rendering time to make the page run faster