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