通过js+css+html实现二级下拉列表

先用css写下样式

<style>
            * {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            #box {
                margin: auto;
                width: 80px;
                
            }

            #box>li>p {
                background: #444;
                line-height: 25px;
                border: 1px solid #888;
                text-align: center;
            }
            #box>li>p:hover{
                cursor: pointer;
            }

            .aa {
                display: none;
                background: gray;
                /* width: 70px; */
                text-align: center;
            }

            .aa p {
                height: 30px;
                color: #fff;
                line-height: 30px;
                border-bottom: 1px solid #666;
            }
            .aa p{
                cursor: pointer;
            }
        
</style>

html样式

<ul id="box">
        <li>
            <p>菜单一</p>
            <div class="aa">
                <p>好友一</p>
                <p>好友二</p>
                <p>好友三</p>
                <p>好友四</p>
            </div>
        </li>

        <li>
            <p>菜单二</p>
            <div class="aa">
                <p>好友一</p>
                <p>好友二</p>
                <p>好友三</p>
                <p>好友四</p>
            </div>
        </li>

        <li>
            <p>菜单三</p>
            <div class="aa">
                <p>好友一</p>
                <p>好友二</p>
                <p>好友三</p>
                <p>好友四</p>
            </div>
        </li>

    </ul>

js实现下拉列表

<script>
  var a = document.querySelectorAll('ul li>p');//找到ul li下的 p标签
  for (var i = 0; i < a.length; i++) { //这里遍历每一个p标签 然后给每一个p标签添加点击事件
      a[i].onclick = function () {
        var b = this.parentNode.children[1]; //通过 li 找到 li下的div
        var sty = window.getComputedStyle(b, null).display;//找到div的属性 因为在这里没办法直接找到在头部定义的display属性
        if (sty == 'none') { //这里判断div的display属性如果为none就转换为block
          b.style.display = 'block';
             } else {
           b.style.display = 'none'
             }
       }
           
  }
    </script>

可能写的有点乱 需要自己慢慢理解！