Html 将鼠标悬停在上方时带有列表的菜单按钮和嵌套菜单

我已经创建了一个按钮，让我们称之为菜单按钮，它有3行，象征着一个菜单。当用户将鼠标悬停在其上方时，将显示一个列表。到目前为止，代码正在执行我想要的操作。它显示了两个按钮，但是当我给每个按钮一个嵌套列表时，显示变得非常有趣。这是我的

我想要的是，当菜单按钮悬停在它上面时，它会显示另外两个按钮，或者我猜可能只是列表项，一个按钮称为区域，另一个按钮称为导出。当它们中的任何一个悬停在上面时，我希望它们在自己的旁边显示一个列表

HTML

这是工作代码

* { 边际：0px； 填充：0px； } 身体{ 背景颜色：浅蓝色； } /*垂直导航条*/ navbar先生{ 宽度：50%； 显示：块； 保证金：50px自动； 填充：8px 10px； 过渡：均为0.5s； -webkit过渡：所有0.5s； } .导航栏分区{ 高度：5px！重要； 背景：fff； 保证金：7px 0px 7px 0px； 边界半径：25px； 过渡：均为0.5s； -webkit过渡：所有0.5s； } .二{ 宽度：35px； } .三{ 宽度：50px； } .navbar：悬停div{ 宽度：60px； } .下拉列表{ 位置：相对位置； 显示：内联块； } .dropbtn{ 背景色：9C； 颜色：白色； 填充：16px； 字体大小：16px； 边界：无； } dropbtnLi先生{ 背景色：9C； 颜色：白色； 字体大小：16px； 边界：无； } .下拉内容{ 显示：无； 位置：绝对位置； 背景色：F1F1； 最小宽度：160px； 盒影：0px 8px 16px 0px rgba0,0,0.2； z指数：1； } /*下拉列表中的链接*/ .下拉列表内容li{ 颜色：黑色； 填充：12px 16px； 文字装饰：无； 显示：块； } /*更改悬停时下拉链接的颜色*/ .下拉列表内容li:hover{背景色：ddd；} /*悬停时显示下拉菜单*/ .dropdown:hover>.dropdown内容{display:block；} /*显示下拉内容时，更改下拉按钮的背景色*/ .dropdown:hover.dropbtn{背景色：4C66E9；} 日本 南美洲 欧洲 擅长 CSV 悬停时，您需要分别显示它们，即悬停时 主按钮仅显示子按钮。当你在空中盘旋时 子按钮，然后可以显示列表

* { 边际：0px； 填充：0px； } 身体{ 背景颜色：浅蓝色； } /*垂直导航条*/ navbar先生{ 宽度：50%； 显示：块； 保证金：50px自动； 填充：8px 10px； 过渡：均为0.5s； -webkit过渡：所有0.5s； } .导航栏分区{ 高度：5px！重要； 背景：fff； 保证金：7px 0px 7px 0px； 边界半径：25px； 过渡：均为0.5s； -webkit过渡：所有0.5s； } .二{ 宽度：35px； } .三{ 宽度：50px； } .navbar：悬停div{ 宽度：60px； } .下拉列表{ 位置：相对位置； 显示：内联块； } .dropbtn{ 背景色：9C； 颜色：白色； 填充：16px； 字体大小：16px； 边界：无； 宽度：100%； } dropbtnLi先生{ 背景色：9C； 颜色：白色； 字体大小：16px； 边界：无； } .下拉内容{ 显示：无； 位置：绝对位置； 背景色：F1F1； 最小宽度：160px； 盒影：0px 8px 16px 0px rgba0,0,0.2； z指数：1； } /*下拉列表中的链接*/ .下拉列表内容li{ 颜色：黑色； 填充：12px 16px； 文字装饰：无； 显示：块； 位置：相对位置； } /*更改悬停时下拉链接的颜色*/ .下拉列表内容li:hover{背景色：ddd；} /*悬停时显示下拉菜单*/ .dropdown:hover.dropdown内容{display:block；} /*显示下拉内容时，更改下拉按钮的背景色*/ .dropdown:hover.dropbtn{背景色：4C66E9；} .下拉式内容列表{ 显示：无； } .下拉式内容列表：悬停{ 显示：块！重要； } .下拉内容li:悬停.下拉内容列表{ 显示：块； 位置：绝对位置； 左：100%； 排名：0； 背景：EFEF； } 国 日本 南美洲 欧洲 出口 擅长 CSV

---

下次试着写一段话，我想有人会帮你的better@AKASHPANDEY对不起，你想说的是一个片段吗？js小提琴正在工作我错过了你提到的js小提琴我的坏

  <div class="dropdown">
  <button class="dropbtn">
  <div class="navbar">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>
  </button> 
  <div class="dropdown-content">
<ul>
  <li>
      <button class="dropbtn" value="Region">
      <div class="dropdown-content">
        <ul>
          <li>Japan</li>
          <li>South America</li>
          <li>Europe</li>
        </ul>
      </div>
  </li>
  <li>
      <button class="dropbtn" value="Export">
      <div class="dropdown-content">
        <ul>
          <li>Excel</li>
          <li>CSV</li>
        </ul>
      </div>
    </li>
  </ul>
 </div>
 </div>

  * {
  margin: 0px;
  padding: 0px;
 }

 body {
  background-color: lightblue;
 }

 .navbar {
   width: 50%;
   display: block;
   margin: 50px auto;
   padding: 8px 10px;
   transition: all 0.5s;
  -webkit-transition: all 0.5s;
 }

  .navbar div {
    height: 5px !important;
    background: #fff;
    margin: 7px 0px 7px 0px;
    border-radius: 25px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
  }

  .two {
   width: 35px;
   }

   .three {
   width: 50px;
   }

   .navbar:hover div {
   width: 60px;
   }


  .dropdown {
   position: relative;
   display: inline-block;
  }

 .dropbtn {
   background-color: #9FACEC;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
 }

 .dropbtnLi {
    background-color: #9FACEC;
    color: white;
    font-size: 16px;
    border: none;
  }


  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
   }

   .dropdown-content li {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
   }

   .dropdown-content li:hover {background-color: #ddd;}

   .dropdown:hover .dropdown-content {display: block;}

   .dropdown:hover .dropbtn {background-color: #4C66E9;}