html - 创建特定形状的菜单悬停背景颜色

Question

我有一个下拉导航菜单，我想在悬停时为其子菜单添加背景颜色，如下面的屏幕截图所示，如果菜单文本长或短，它应该正确设置。但我不知道如何实现悬停。

Answer 1

你可以尝试像 this 这样的东西为每个列表项使用一个伪元素。

&:before {
  content: '';
  position: absolute;
  width: 3em;
  height: calc(100% + 3px);
  right: calc(100% + 1px);
  top: .4em;
  transform: skewX(-20deg) rotate(-20deg);
  transition: .3s;
 }

请记住，理想情况下，您必须避免这种仅用于演示目的的魔数(Magic Number)。