Question

我正在处理悬停下拉菜单，并且某些下拉菜单的内容从屏幕边缘移出。我没有一个很好的解决方案来确保下拉菜单保留在屏幕的可见区域中，而不是笨拙地为特定的下拉菜单添加ID并按我认为合适的方式放置它们。

我在下面添加了一个片段来演示该问题。我还使用scss创建了一个Codepen。 codepen.io

我希望所有下拉菜单都显示在屏幕边界内。

body {
  box-sizing: border-box;
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: row;
  outline: 5px solid orangered;
}

.container__item {
  position: relative;
  height: 20px;
  width: 100%;
  background-color: blue;
  border: 5px solid black;
}

.container__itemdropdown {
  position: absolute;
  top: 100%;
  height: 100px;
  width: 500px;
  background-image: linear-gradient(90deg, red, yellow, yellow, red);
  margin: 10px;
  border: 5px solid black;
  opacity: 0;
}

.container__item:hover .container__itemdropdown {
  opacity: 1;
}

<div class="container">
  <div class="container__item">
    <div class="container__itemdropdown"></div>
  </div>
  <div class="container__item">
    <div class="container__itemdropdown"></div>
  </div>
  <div class="container__item">
    <div class="container__itemdropdown"></div>
  </div>
  <div class="container__item">
    <div class="container__itemdropdown"></div>
  </div>
  <div class="container__item">
    <div class="container__itemdropdown"></div>
  </div>
</div>

Answer 1

对scss不太确定，但是可以尝试的一些CSS技巧例如：

container：last-child { 浮动：对 }

或

容器{位置：绝对}；容器{左：-（someNumber）px};

希望这两个快速修复可以帮助解决该问题！

如何放置CSS下拉菜单，使其不离开屏幕？

1 个答案: