带有平行四边形形状和子菜单的CSS菜单

我正在尝试创建一个包含如下子菜单的菜单：

• 选项之间的对角线边界
• 悬停时的平行四边形
• 子菜单是一个带有选项的简单矩形

问题是，如果我使用“扭曲”，文本和子菜单也会扭曲。 你知道怎么解决这个问题吗

这里有一些基本代码：

@导入url（'https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css' );
导航{
位置：绝对位置；
最高：50%；
左：0；
底部：50%；
右：0；
}
菜单{
宽度：940px；
高度：40px；
线高：40px；
位置：相对位置；
文本对齐：居中；
保证金：自动；
填充：自动；
背景色：#AFF8C4；
-左上角moz边界半径：4px；
-webkit边框左上半径：4px；
边框左上半径：4px；
-moz边框半径右上角：4px；
-webkit边框右上角半径：4px；
边框右上角半径：4px；
}
菜单李{
浮动：左；
宽度：自动；
}
菜单：悬停{
背景色：#9CE0C9；
-moz过渡属性：背景色；
-o-过渡性质：背景色；
-webkit转换属性：背景色；
过渡特性：背景色；
-moz转换持续时间：0.33s；
-o-过渡持续时间：0.33s；
-webkit转换持续时间：0.33s；
过渡时间：0.33s；
-左上角moz边界半径：4px；
-webkit边框左上半径：4px；
边框左上半径：4px；
-moz边框半径右上角：4px；
-webkit边框右上角半径：4px；
边框右上角半径：4px；
}
菜单li：悬停ul{
宽度：940px；
背景：#9CE0C9；
能见度：可见；
过滤器：progid:DXImageTransform.Microsoft.Alpha（enabled=false）；
不透明度：1；
-moz过渡特性：不透明度；
-o-过渡性质：不透明度；
-webkit转换属性：不透明度；
过渡特性：不透明度；
-moz转换持续时间：0.33s；
-o-过渡持续时间：0.33s；
-webkit转换持续时间：0.33s；
过渡时间：0.33s；
-moz边框半径左下角：4px；
-webkit边框左下半径：4px；
边框左下半径：4px；
-moz边框半径右下角：4px；
-webkit边框右下半径：4px；
边框右下半径：4px；
}
菜单李a{
显示：块；
宽度：自动；
文字装饰：无；
}
ul.菜单a，ul.子菜单a{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：#0E0500；
填充：0 10px；
}
ul子菜单{
过滤器：progid:DXImageTransform.Microsoft.Alpha（不透明度=0）；
不透明度：0；
可见性：隐藏；
显示：块；
位置：绝对位置；
左：0；
高度：40px；
线高：40px；
背景色：#9CE0C9；
}

当鼠标悬停在

li

上时，可以使用伪元素创建形状，然后将其倾斜

@导入url（'https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css');
导航{
位置：绝对位置；
最高：50%；
左：0；
底部：50%；
右：0；
}
菜单{
宽度：940px；
高度：40px；
线高：40px；
位置：相对位置；
文本对齐：居中；
背景色：#AFF8C4；
-左上角moz边界半径：4px；
-webkit边框左上半径：4px；
边框左上半径：4px；
-moz边框半径右上角：4px；
-webkit边框右上角半径：4px；
边框右上角半径：4px；
}
菜单李{
浮动：左；
位置：相对位置；
}
ul.menu>li：之后{
内容：''；
显示：无；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
变换：倾斜（-15度）；
z指数：0；
B