ichengzi/menu.css

## menu.css
/* https://www.bilibili.com/video/BV1mA4y1Z7cy */
/* https://m.php.cn/article/473454.html  画三角形文章 */

details {
    position: relative;
    width: 300px;
    padding-left: 20px;
}

summary {
    list-style: none;
    padding: 10px;
}

summary:hover{
    background-color: aliceblue;
    cursor: pointer;
}

summary:not(:only-child):before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 15px;
    left: 20px;
    border: 6px solid #ccc;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

details[open] > summary:not(:only-child):before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 18px;
    left: 15px;
    border: 6px solid #ccc;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

## menu.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Dmeo</title>
</head>
<body>
    <div id="menuBox"></div>
    <link href="./menu.css" rel="stylesheet"></style>
    <script src="./menu.js"></script>
</body>
</html>

## menu.js
// https://www.bilibili.com/video/BV1YT4y167TL

const menuData = [
    {
        "name": "1",
        "children": [
            { "name": "1-1" },
            { "name": "1-2" },
            { "name": "1-3" },
        ]
    },
    {
        "name": "2",
        "children": [
            { "name": "2-1" },
            { "name": "2-2" },
            {
                "name": "3-3",
                "children": [
                    {
                        "name": "3-3-1"
                    }
                ]
            },
        ]
    }
]

function createMenu(data, root) {
    if (data.length) {
        data.forEach(menu => {
            let detailsEle = document.createElement('details');
            let summaryEle = document.createElement('summary');
            summaryEle.innerText = menu.name;
            detailsEle.appendChild(summaryEle);
            root.appendChild(detailsEle);
            if (menu.children?.length) {
                createMenu(menu.children, detailsEle);
            }
        })
    }
}

const menu = document.getElementById('menuBox');
createMenu(menuData, menu);