HTML+CSS+JS多级菜单

html

    <ul class="level level-1">
        <li>
            11 <span>></span>
            <ul class="level level-2">
                <li>
                22 <span>></span>
                    <ul class="level level-3">
                        <li>
                            33
                        </li>
                    </ul>
                </li>
                <li>22</li>
            </ul>
        </li>
        <li>11</li>
        <li>11</li>

    </ul>

css

ul{
    list-style:none;background:white;
    user-select:none;
}
ul.level-1>li{
    background-color:red;
    padding-left:10px;

}
ul.level-2>li{
    background-color:green;
    padding-left:20px;
    margin-left:-10px;
}
ul.level-3>li{
    background-color:blue;
    padding-left:30px;
    margin-left:-20px;
}

js

items = document.querySelectorAll('ul.level>li');
items.forEach(function(item){
    if (item.children.length===2){
        item.onclick=function(event){
            if ( item.children[1].style.display === 'none'){
                item.children[1].style.display = 'block';
                item.children[0].style.writingMode = 'rl-tb';
            }else{
                item.children[1].style.display = 'none';
                item.children[0].style.writingMode = 'tb-rl';
            }
            event.stopPropagation();
        }
    }else{
        item.onclick=function(event){
            event.stopPropagation();
        }
    }
})