Dynamic two level menu based on CSS

Time:2021-2-26

Dynamic realization of simple two level menu

When the mouse is placed on the first level label, the mouse will become the shape of a small hand 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 label</p>
                <ul class="second">
                    <li>Secondary label</li>
                    <li>Secondary label</li>
                </ul>
            </li>

            <li class="first">
                <p>First level label</p>
                <ul class="second">
                    <li>Secondary label</li>
                    <li>Secondary label</li>
                </ul>
            </li>
        </ul>
    </div>

</body>
</html>

summary

So far, this article about CSS dynamic secondary menu is introduced here. For more relevant CSS dynamic secondary menu content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!