Question

我有一个菜单，其中一些项目显示翻转下拉列表。

我想要实现的目标：

下拉列入父元素内部以使用：hover伪类来显示它
下拉是窗口宽度的100％，而不是它的父级
下拉内容相对于父菜单项
CSS三角形指向父菜单项的中间
CSS转换以淡入菜单并将其移至位置

我正在使用的布局类型的快速小提琴： http://jsfiddle.net/kn3Z3/2/

由于我想将下拉列表保留在父元素中，因此我设置了父元素的position: static。问题是现在我没有提到将CSS三角形定位到。

我无法对每个菜单项的下拉列表进行硬编码，因为

菜单将是动态的，
菜单栏的字体大小随着媒体查询而变化（在小提琴中，我也让它们改变颜色以轻松看到发生的事情）

我尝试了其他解决方案，其中三角形是父菜单项本身的一部分。这意味着我无法将其设置为正确的菜单 - 并且动画的性能更差。

任何人都有任何想法如何实现这一点，或者我是否正确认为这种方法与动画不可能？

PS：还试过这里描述的100％宽度解决方案：Dropdown Menu - Make the <ul> submenu 100% width但是我需要下拉列表的内容与父菜单项没有相对对齐。

Answer 1

onHover

html,
body {
  font-family: "Fira Sans", sans-serif;
}

.nav {
  display: flex;
  position: relative;
}
.nav div {
  padding: 6.25px 12.5px;
  background-color: #ddd;
}

.item {
  position: relative;
}
.item:hover:before {
  content: "";
  border-right: 16px solid transparent;
  border-left: 16px solid transparent;
  border-bottom: 16px solid #ccc;
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
}
.item:hover .subnav {
  opacity: 1;
  transform: scale(1);
}

.subnav {
  position: fixed;
  top: 60px;
  left: 10px;
  right: 10px;
  background-color: #ccc;
  opacity: 1;
  transform-origin: top left;
  transform: scale(0);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

CSS三角形相对于父项的100％宽度下拉列表

1 个答案: