如何在css中创建全宽子菜单

我想创建一个子菜单，它将具有从左到右的屏幕全宽。 但是下面的CSS对我来说不起作用，而是从家里开始。 我试着将宽度设置为100%，显示为块等，但仍然不适合我。 HTML

.mtmegamenu.菜单项{
不透明度：0；
变换原点：0；
过渡：所有0.8秒到0秒；
左：0！重要；
-ms变换：scaleY（0）；
-webkit转换：scaleY（0）；
-moz变换：scaleY（0）；
-o变换：scaleY（0）；
变换：scaleY（0）；
}
.mtmegamenu li:悬停.菜单项{
不透明度：1；
-ms变换：scaleY（1）；
-webkit转换：scaleY（1）；
-moz变换：scaleY（1）；
-o变换：scaleY（1）；
变换：scaleY（1）；
}
.mtmegamenu{
位置：相对位置；
保证金：自动0px自动30px；
字体系列：“Poppins”，无衬线；
高度：40px；
}
.mtmegamenu a：焦点{
大纲：0
}
.mtmegamenu>ul{
显示：内联块；
明确：两者皆有；
保证金：0
}
.mtmegamenu>ul{
高度：28px；
填充：0；
文本对齐：左对齐
}
.mtmegamenu>ul>li{
显示：内联块；
字体大小：15px；
文本转换：大写；
右边距：1px；
背景：无！重要；
右边距：30px；
}

您应该使用“vw”属性填充所有屏幕宽度：

#wide-div {
  width: 100vw;
}

---

你在找这样的东西吗

.mtmegamenu.菜单项{
不透明度：0；
变换原点：0；
过渡：所有0.8秒到0秒；
左：0！重要；
-ms变换：scaleY（0）；
-webkit转换：scaleY（0）；
-moz变换：scaleY（0）；
-o变换：scaleY（0）；
变换：scaleY（0）；
}
.mtmegamenu li:悬停.菜单项{
不透明度：1；
-ms变换：scaleY（1）；
-webkit转换：scaleY（1）；
-moz变换：scaleY（1）；
-o变换：scaleY（1）；
变换：scaleY（1）；
}
.mtmegamenu{
位置：相对位置；
保证金：自动0px自动30px；
字体系列：“Poppins”，无衬线；
高度：40px；
}
.mtmegamenu a：焦点{
大纲：0
}
.mtmegamenu>ul{
显示：内联块；
明确：两者皆有；
保证金：0
}
.mtmegamenu>ul{
高度：28px；
填充：0；
文本对齐：左对齐
}
.mtmegamenu>ul>li{
显示：内联；/*内联*/
字体大小：15px；
文本转换：大写；
右边距：1px；
背景：无！重要；
右边距：30px；
浮动：左；/*已添加*/
}

HTML如下wplz add HTML code..mtmegamenu{position:initial；}它不工作，它从主菜单开始，到最后一个父菜单结束#wide div是我的例子中的哪个元素，它是ul或lidenpends，你指的是哪个元素。如果你想让li元素100%出现在你的屏幕上，你应该使用我的建议。如果它对你有帮助，请将我的答案设置为答案。不，当鼠标悬停在男士上时，全宽子菜单应该显示出来。我不确定你期望的是什么。你们有任何例子或图片吗？请查看图片附件，若你们看到子菜单是从家里来的，它应该来自屏幕的左侧，我还需要调整高度