前端如何制作简易的菜单多级导航栏

<div class="dropdown">
 <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
   <a href="#">菜单1</a>
   <a href="#">菜单2</a>
   <a href="#">菜单3</a>
  </div>
</div>

.dropdown
{
  display:inline-block;
}
.dropbtn
{
  background-color:green;
  color:white;
  padding:16px;
  font-size:16px;
  border:none;
  cursor:pointer;/*手型光标*/
}
.dropdown-content
{
    display:none;/*隐藏元素且不保留物理位置，不占物理空间*/
    background-color:#f9f9f9;
    min-width:160px;/*设置最小宽度*/
    /*设置div的外阴影*/
    /*对应值为水平，垂直，模糊距离，rgba，颜色，a表示透明度0-1*/
    box-shadow:0px  8px 16px rgba(0,0,0,0.3);
}
/*悬停显示*/
.dropdown:hover .dropdown-content
{
    display:block;
}
.dropdown-content a
{
    color:black;
    display:block;
    padding:12px 16px;
    text-decoration:none;
}
.dropdown-content a:hover
{
    background-color:#f1f1f1;
}