Question

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

CSS

.d_button {
    color: #FFFFFF;
    background-color: #222222;
    border: none;
    cursor: pointer;
    font-size: 80%;
    font-weight: bolder;
    line-height: 50%;
    padding: 8px;
}
.drop_top {
    position: inherit;
    display: inline-block;
    background-color: #222222;
    float: right;
}
.drop_bot {
    position: inherit;
    display: inline-block;
    background-color: #222222;
    float: left;
}
.drop_content {
    display: none;
    position: absolute;
    right: 14px;
    background-color: #222222;
    min-width: 80px;
}
.drop_content a {
    color: #FFFFFF;
    padding: 5px;
    text-decoration: none;
    display: block;
}
.drop_content a:hover {
    color: #03A9F4;
}
.drop_top:hover .drop_content {
    display: block;
}
.drop_bot:hover .drop_content {
    display: block;
}

<div id="header_container">
  <div id="header">
    Header Content
    <div class="drop_top">
      <button class="d_button">
        <div id="nav_icon" class="top">&#9776;</div>
      </button>
      <div class="drop_content">
        <a href="#">A</a>
        <a href="#">B</a>
        <a href="#">C</a>
      </div>
    </div>
  </div>
</div>

<div id="container">
  <div id="content">

  </div>
</div>

<div id="footer_container">
  <div id="footer">
    Footer Content
    <div class="drop_bot">
      <button class="d_button">
        <div id="nav_icon" class="bottom">&#9776;</div>
      </button>
      <div class="drop_content">
        <a href="#">A</a>
        <a href="#">B</a>
        <a href="#">C</a>
      </div>
    </div>
  </div>
</div>

由于

Answer 1

好的首先，你所拥有的这个下拉菜单很可能不会起作用，因为你的下拉菜单只会在你将鼠标悬停在按钮上时显示，而不是在你实际停留在实际下拉菜单上时显示。因此，您的下拉菜单将会出现，但是当您从下拉按钮中删除光标后再尝试单击链接时，菜单将消失。据说要创建一个css下拉菜单，你需要将下拉按钮和下拉菜单包装在容器中，然后将此容器定位为相对容器。然后你可以将下拉菜单定位为绝对值，你可以控制这个绝对定位div在你的css中顶部，右边，左边和底部的相对定位div内的位置。希望这是有道理的。因此，我为您创建了一个小提琴，可以查看创建下拉菜单的正确技巧。

这是小提琴Fiddle

首先，您将从下拉菜单

开始以下标记

<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：

.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;}

然后你可以在这个CSS中看到我已经将页脚下拉菜单定位为具有以下css bottom:100%;top:auto;left:0;right:auto;，因此您可以相应地控制相对定位div内部的绝对定位div的位置。

我的代码的“Drop-Up”菜单

1 个答案: