修复了下拉菜单，但 css 样式妨碍了

Question

我是一个带有两个链接的下拉菜单，目前我希望菜单固定在该部分的右上角，但是我将其样式设置为容器应该相对定位但它是 ul inside 是绝对的，所以它会正确地下降。我现在该如何解决这个问题？我尝试将固定位置添加到按钮，但显然在向下滚动时，即使按钮已固定，ul 也没有出现。

.contact {
  position: relative;
  top: 5vh;
  right: 4vw;
  font-family: Helvetica, sans-serif;
  height: 20vh;
  letter-spacing: 3px;
}

.contactbtn {
  color: white;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: bold;
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  position: fixed;
  /* only fixes the button */
}

.contactbtn:hover {
  opacity: 0.6;
}

.contact ul,
.contact-a ul {
  position: absolute;
  left: -10vw;
  margin-top: 4vh;
  color: black;
  width: 300px;
  height: 150px;
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  list-style: none;
  text-transform: uppercase;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.4s ease;
  -webkit-transform: translateY(-10px);
  -webkit-transition: all 0.4s ease;
  -moz-transform: translateY(-10px);
  -moz-transition: all 0.4s ease;
}

.contact a,
.contact-a a {
  text-decoration: none;
}

.contact a:hover {
  background-color: var(--grCol3);
}

.menu-container:hover .menu {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  outline: none;
}

<div class="contact menu-container">
  <button class="contactbtn" style="color:black;">Contact</button>
  <ul class="menu">
    <li>
      <p>For Any Enquiries→</p>
    </li>
    <li><a id="mail" style="color:black;" href="mailto:hello@leung.com" target="_blank">hello@leung.com</a></li>
    <li>
      <p>+44 5555 070158</p>
    </li><br>
    <li><a id="ig" href="https://www.instagram.com/leung/?hl=en" target="_blank" style="color:black;">Instagram</a></li>
  </ul>
</div>

Answer 1

你的例子不是很清楚，因为看不到垂直滚动（没有足够的内容来填充代码段示例）但是，添加一些填充内容，我明白了这是怎么回事：

为了使出现在按钮的 :hover 上的下拉菜单相对于按钮，无论滚动位置如何，它都需要是按钮的子项。为此，drop-down 菜单的父菜单必须是 position:relative 但是，由于按钮是固定的，我们需要以下结构：

我们的父固定元素包含一切
它里面的容器有 position: relative
未说明具体位置规则的按钮
绝对定位的下拉菜单（假设你想 fine-tune 即使您可以跳过它，它的位置也是如此一共）

看起来像这样：

然后导航区域本身如下所示：

最后，您的 css 可能是这样的：

.nav-area {
position: fixed;
left: 20px;
top: 20px;
display: block;
width: 100px;
height: 50px;
overflow: visible;
}

.nav-wrapper {
display: block;
width: 100%;
height: 100%;
position: relative;
overflow: visible;
}

.button {
display: block;
width: 100px;
height: 50px;
}

.drop-down-menu {
display: none;
position: absolute;
left: 0;
top: 50px;
}

悬停时，显示下一个兄弟元素（您的下拉菜单）

.button:hover + .drop-down-menu {
display: block;
}

因此，您的 nav-area 固定在您的屏幕上，nav-wrapper 在 nav-area 内部并且有 position:relative 允许 position:absolute; 元素在其中瞄准它。但是，您实际上不再需要 position:absolute。

试一试，告诉我们进展如何。

修复了下拉菜单，但 css 样式妨碍了

making a dropdown menu fixed but css styling getting in the way

html

css

css-position

drop-down-menu