Html 双正常和超大菜单

我正在尝试制作一个带有超大菜单和普通菜单的导航栏 但问题是在我的超级菜单中，我希望

li

和所有

ul

元素一起显示，但在正常菜单中，我希望

ul

元素仅在

li

悬停时显示

我无法避免第一个的css干扰第二个：

html，body，nav，ul，li，a，span{
边距：0；填充：0；
}
身体{
字体系列：helvetica；
字体大小：16px；
}
导航ul{
背景色：#444；
显示器：flex；
弯曲方向：立柱；
}
李国荣{
列表样式类型：无；
}
海军ulli a{
填充：.8rem 1rem；
显示：块；
文字装饰：无；
颜色：#f9f9f9；
}
nav ul li:悬停{
背景：rgba（0,0,0,25）；
}
导航ulli：悬停分区sf-mega{
最高：100%；
}
导航分区sf-mega ul{
宽度：25%；
边缘底部：40px；
颜色：#000；
盒影：无；
}
导航分区sf-mega h4{
边缘底部：15px；
文本转换：大写；
}
导航分区sf-mega ul li{
显示：块；
}
导航分区sf-mega ul li a{
边缘顶部：10px；
过渡：0.5s；
颜色：#000；
}
导航分区sf-mega ul li a：悬停{
颜色：#4096ee；
}
@仅介质屏幕和（最大宽度：480px）{
.你有孩子吗{
左：2rem；
}
你有孩子吗？你有孩子吗{
左：3rem；
}
.向下箭头：：之后{
内容：“\f107”；
}
}
@仅介质屏幕和（最小宽度：480px）{
导航ul{
弯曲方向：行；
}
李国荣{
位置：相对位置；
弹性：10自动；
文本对齐：左对齐；
}
.有孩子吗？有孩子吗？有孩子吗{
显示：无；
宽度：100%；
位置：绝对位置；
}
.有孩子吗？有孩子吗{
左：100%；
排名：0；
}
nav ul li:hover ul.。has_children ul.has_children:hover ul{
显示器：flex；
弯曲方向：立柱；
}
}

也许您可能想重写样式以保持mega菜单和普通菜单样式分开，但我已进行了一些调试，并将以下内容添加到

最小宽度：480px

媒体查询中，以在悬停时的桌面视图中显示mega菜单：

  .has_children:hover .sf-mega ul {
    display: flex;
    width: 100%;
    flex-direction: row;
  }
  .has_children:hover .sf-mega ul .has_children ul {
    display: flex;
    flex-direction: column;
    top: initial;
    left: 0;
  }

请参见下面的演示：

html，
身体，
导航，
ul，
锂，
A.
跨度{
保证金：0；
填充：0；
}
身体{
字体系列：helvetica；
字体大小：16px；
}
导航ul{
背景色：#444；
显示器：flex；
弯曲方向：立柱；
}
李国荣{
列表样式类型：无；
}
海军ulli a{
填充：.8rem 1rem；
显示：块；
文字装饰：无；
颜色：#f9f9f9；
}
nav ul li:悬停{
背景：rgba（0,0,0,25）；
}
导航ulli：悬停分区sf-mega{
最高：100%；
}
导航分区sf-mega ul{
宽度：25%；
边缘底部：40px；
颜色：#000；
盒影：无；
}
导航分区sf-mega h4{
边缘底部：15px；
文本转换：大写；
}
导航分区sf-mega ul li{
显示：块；
}
导航分区sf-mega ul li a{
边缘顶部：10px；
过渡：0.5s；
颜色：#000；
}
导航分区sf-mega ul li a：悬停{
颜色：#4096ee；
}
@仅介质屏幕和（最大宽度：480px）{
.你有孩子吗{
左：2rem；
}
你有孩子吗？你有孩子吗{
左：3rem；
}
.向下箭头：：之后{
内容：“\f107”；
}
}
@仅介质屏幕和（最小宽度：480px）{
导航ul{
弯曲方向：行；
}
李国荣{
位置：相对位置；
弹性：10自动；
文本对齐：左对齐；
}
.你有孩子吗，
.有孩子吗？有孩子吗{
显示：无；
宽度：100%；
位置：绝对位置；
}
.有孩子吗？有孩子吗{
左：100%；
排名：0；
}
导航ul li：悬停ul，
.有孩子吗？有孩子吗：悬停{
显示器：flex；
弯曲方向：立柱；
}
/*增加*/
.has_children:hover.sf mega ul{
显示器：flex；
宽度：100%；
弯曲方向：行；
}
.有两个孩子：霍夫