Html 在菜单项的悬停处创建菱形

我有一个菜单项，当鼠标悬停在它上面时，它会从一个橙色的盒子上掉下来

.menu > li > a:hover:after {
    position: absolute;
    left: 0px;
    border-style: solid;
    border-color: transparent;
}

然而，我正在努力实现下拉框下方的菱形效果

---

我在这里看到一篇链接这个[网站][4]的帖子，我尝试使用菱形：after方法，但结果却大相径庭。我已经评论了需要编辑的css部分，以供快速参考。如果有人能帮忙的话

1在CSS中没有对：after psuedo元素的声明。menu>li>a:hover:after{/*您的CSS*/}。 例如：

.menu > li > a:hover:after {
    content: ""; /* empty content */
    position: absolute;
    bottom: -50px; /* position 50px below the bottom of the menu link */
    left: 0px;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 60px; /* diamond has 60px to the left and to the right of the midpoint, so the menu item should be 120px width */
    border-top: 50px solid #FF6E0D;
}

此方法要求您指定菜单项的宽度，因为您希望将菱形跨过链接的整个底部。使用左/右边框宽度

---

2要使用此方法，应添加位置：相对；添加到.menu>li>声明，因为：after psuedo元素需要这样来定位自身。

您可以为此使用伪元素，并在悬停时“移动”它：

div{ 高度：50px； 宽度：100px； 背景：橙色； 保证金：0自动； 文本对齐：居中； 位置：相对位置； } 部门：以前{ 内容：； 位置：绝对位置； 左边框：50px实心透明； 右边框：50px实心透明； 边框顶部：50像素实心橙色； 排名：0； 左：0； 过渡：均为0.6s； z指数：-1； } div:悬停：之前{ 最高：100%； } 选项我使用：after伪元素添加箭头。不过，这两种过渡看起来都不太好，因为它们都是单独设置动画的。如果你想让事情顺利进行的话，你得在那里挖一点。但这至少让箭头出现在正确的位置，这看起来确实是你问题的重要部分。然后您只需使用hover伪元素将display设置为block

.menu > li > a:after {
  content: "";
  position: absolute;
  display: none;
  top: 160px;
  left: 0px;
  width: 0;
  height: 0;
  border-left: 62px solid transparent;
  border-right: 62px solid transparent;
  border-top: 60px solid #FF6E0D;
}

.menu > li > a:hover:after {
  display: block;
}

---

这有帮助吗-？虽然这得到了形状，但我的问题仍然存在，因为我似乎无法将它与我的悬停和焦点结合起来。正如我在我的问题中所说的，也链接到了解释harry提到的方法的网站，结果是大错特错。@JungleBoogie的可能副本你应该使用转换而不是边界黑客。这就解决了问题，我从来没有设置过相对位置或菜单项宽度！我总是忘记它，所以这是我检查的第一件事：顺便说一句，jbutler483的答案在动画转换中有更好的使用方法，因为我的示例是静态的。谢谢你的回答Jeff，我用上面的答案解决了它。