Javascript 如何防止CSS变换扭曲破坏子元素位置？

认为这里的导航栏工作得很好。将鼠标悬停在下拉菜单上时，将显示一个全宽下拉菜单：

现在我想为导航栏上的li父元素添加一个出于视觉原因的倾斜，但它会弄乱下拉菜单，使其不是全宽：

---

我很难理解为什么会发生这种情况以及如何修复它

您需要在

内部对

应用倾斜，而不是

ul

：

.has-dropdown a {
    position: relative !important;
    transform: skew(-20deg);
  }

---

您需要在

内部为
应用倾斜，而不是为
ul
应用倾斜：

.has-dropdown a {
    position: relative !important;
    transform: skew(-20deg);
  }

.has dropdown
包含菜单标题和菜单项，因此将
skew
应用于
。具有dropdown
效果

相反，只对菜单标题应用
skew
：

.has-dropdown > a {
  transform:skew(-20deg);
}

.has dropdown
包含菜单标题和菜单项，因此将
skew
应用于
。具有dropdown
效果

相反，只对菜单标题应用
skew
：

.has-dropdown > a {
  transform:skew(-20deg);
}

你需要它看起来像这样吗？：哦，哇，很简单。是的，这就是我需要的。因此，我只需要将倾斜应用于
a
元素。如果你不介意把它贴出来作为答案的话！你需要它看起来像这样吗？：哦，哇，很简单。是的，这就是我需要的。因此，我只需要将倾斜应用于
a
元素。如果你不介意把它贴出来作为答案的话！最后一个问题，如何保持文本笔直，但元素倾斜？因此，当我应用背景色时，它看起来是倾斜的，但文本不是？最后一个问题，如何保持文本笔直但元素倾斜？因此，当我应用背景色时，它看起来是倾斜的，但文本不是？