Html &引用；“下拉菜单”；我的代码菜单

因此，我只使用CSS创建了一个下拉菜单，并将它们放置在页眉和页脚上，我的问题是如何使菜单显示在按钮上方而不是下方（仅适用于页脚按钮）。有什么想法吗

CSS

.d\u按钮{
颜色：#FFFFFF；
背景色：#22222；
边界：无；
光标：指针；
字号：80%；
字体大小：粗体；
线高：50%；
填充：8px；
}
.放下你的上衣{
职位：继承；
显示：内联块；
背景色：#22222；
浮动：对；
}
.放下机器人{
职位：继承；
显示：内联块；
背景色：#22222；
浮动：左；
}
.删除内容{
显示：无；
位置：绝对位置；
右：14px；
背景色：#22222；
最小宽度：80px；
}
.删除内容a{
颜色：#FFFFFF；
填充物：5px；
文字装饰：无；
显示：块；
}
.drop_内容a：悬停{
颜色：#03A9F4；
}
.drop_top:悬停。drop_内容{
显示：块；
}
.drop\u机器人：悬停。drop\u内容{
显示：块；
}

标题内容
☰
页脚内容
☰

好的，首先要做的是，您的下拉菜单很可能不起作用，因为您的下拉菜单仅在您将鼠标悬停在按钮上时显示，而在实际的下拉菜单上不显示。因此，您的下拉菜单将出现，但当您尝试从下拉按钮中删除光标并单击链接时，菜单将消失。也就是说，要创建css下拉菜单，您需要将下拉按钮和下拉菜单包装在一个容器中，然后将此容器定位为相对容器。然后，您可以将下拉菜单定位为绝对，并且可以在css中使用top、right、left和bottom控制相对定位div中该绝对定位div的位置。希望这是有道理的。因此，我创建了一个提琴供您查看创建下拉菜单的正确技术

这是小提琴

首先，您将从下拉菜单的以下标记开始

<div class="dropdown">
  <button class="dropdown-button">&#9776;</button>
  <div class="dropdown-menu">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
  </div>
</div>

然后你可以看到，在这个css中，我将页脚下拉菜单定位为具有以下css

bottom:100%；顶部：自动；左：0；右：自动

这样您就可以相应地控制绝对定位div在相对定位div中的位置

.dropdown{
  position:relative;
}
.dropdown-menu{
  position:absolute;
  top:100%;right:0;
  min-width:80px;
  background:#000;
  display:none;
}
footer .dropdown-menu{
  bottom:100%;top:auto;left:0;right:auto;
}
.dropdown:hover .dropdown-menu{
  display:block;
}
.dropdown-menu a{
  display:block;
  color:#fff;
  padding:5px;
  text-decoration:none;
}
.dropdown-button{
  border:none;
  background:#222;
  color:#fff;
  outline:0;
  cursor:pointer;
  padding:10px;
}
header .dropdown{float:right}
footer .dropdown{float:left;}