如何在导航栏中重新定位下拉菜单？答案

【问题标题】：How to reposition the Dropdown in a Navbar?如何在导航栏中重新定位下拉菜单？
【发布时间】：2021-04-26 07:47:06
【问题描述】：

底部解释

HTML：

<div class = "navbar">
    <a href = "index.php">NON-HOVER</a>
<div class="dropdown">
    <a href = "index.php">HOVER</a>
        <div class="dropdown-content"><a href = "index.php">DROPDOWN</a></div>
</div></div>

CSS：

.navbar {
    overflow: visible;
    background-color: #A10800;
    position: fixed;
    top: 0;
    width: 100%;
}
.navbar a:hover {
    background: #D1281F;
    text-decoration: underline; 
}
.dropdown {
    float: left;
    overflow: hidden;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 8px;
    z-index: 1;
}
.dropdown:hover .dropdown-content {
    display: block;
}

说明：

我想制作一个 Navbar，其 下拉菜单 不重叠/覆盖 “HOVER”-酒吧。我不想将 "a" 标记换成“HOVER”，因为我还希望“HOVER”可点击/可见当我像 "NON-HOVER" 一样将鼠标悬停在它上面时。当您将鼠标悬停在“HOVER”上时，问题就出现了，这会使“DROPDOWN”覆盖“HOVER”，而不是放在“HOVER”下方，以便“HOVER”和“DROPDOWN”都可见和可点击。如何重新定位“DROPDOWN”/使其出现在“HOVER”下？

以下是问题的更好可视化：

When you don't hover over anything

When you hover over "HOVER"

【问题讨论】：

您的代码缺少一些样式，在您提供的示例中，.dropdown 元素没有覆盖悬停按钮
我放了两个显示问题的图片链接@cMarius。我的代码中究竟缺少什么“风格”？

标签： html css navbar dropdown

【解决方案1】：

将.dropdownoverflow设置为visible，否则在容器外时您将看不到下拉菜单。将 .dropdown position 设置为 relative 并将 .dropdown-content top 设置为 100% 以将其向下移动 .dropdown 元素的高度

.navbar {
    overflow: visible;
    background-color: #A10800;
    position: fixed;
    top: 0;
    width: 100%;
}
.navbar a:hover {
    background: #D1281F;
    text-decoration: underline; 
}
.dropdown {
  float: left;
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 8px;
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}

<div class = "navbar">
    <a href = "index.php">NON-HOVER</a>
<div class="dropdown">
    <a href = "index.php">HOVER</a>
        <div class="dropdown-content"><a href = "index.php">DROPDOWN</a></div>
</div></div>

【讨论】：

【解决方案2】：

.navbar {
        overflow: visible;
        background-color: #A10800;
        position: fixed;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: left;
    }
    .navbar a:hover {
        background: #D1281F;
        text-decoration: underline; 
    }
    /*.dropdown {
      float: left;
      overflow: hidden;
    }*/
    .dropdown-content {
      display: none;
      position: absolute;
      top: 100%;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    .dropdown:hover .dropdown-content {
      display: block;
    }

<div class = "navbar">
  <a href = "index.php">NON-HOVER</a>
  <div class="dropdown">
    <a href = "index.php">HOVER</a>
    <div class="dropdown-content">
      <a href = "index.php">DROPDOWN</a>
    </div>
  </div>
</div>

【讨论】：