Html 创建下拉菜单？

我正在创建这个网站：我需要我的菜单弹出菜单

我想创建这样一个：如果我将鼠标指向“ABOUT”这个词，菜单就会弹出，有3个选项：类似但倒置

问题是（就像你在页面上看到的）我不知道如何让弹出窗口块和“关于”块一样长

---

另外，我不能使用JavaScript。

如果你不能使用JavaScript，那么你可以使用CSS属性向上推下拉列表，给它一个“下拉”效果

下面是一个示例，其中示例代码与您提供的w3schools链接相同，并添加了以下内容：

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

---

在W3学校示例中，添加底部：100%；归因于：

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

将使菜单向上打开

应该是这样的：

.dropdown:hover .dropdown-content {
    display: block;
    bottom: 100%;
}

---

很简单。只需执行以下2个修改：

将“底部：100%”添加到css文件中的.下拉内容，以反转弹出菜单的方向

  .dropdown-content {
       bottom:100%;  <!-- <<<THIS WILL MAKE THE MENU OPEN UP INSTEAD OF OPENING DOWN -->

       display: none;
       position: absolute;
       background-color: #f9f9f9;
       min-width: 160px;
       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   }

。下拉式内容{
底部：100%；
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}

将“最小宽度：160px”更改为“最小宽度：100%”，使“弹出块”与“关于”块一样长

。下拉式内容{
底部：100%；
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：100%；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}

   .dropdown-content {
       bottom:100%;  
       display: none;
       position: absolute;
       background-color: #f9f9f9;

       min-width: 100%;  <!-- <<<THIS WILL MAKE THE POP UP BLOCK AS WIDE AS THE BUTTON -->

       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   }