Html 在css上悬停时的菜单弹出窗口

我在网站左侧有一个侧边栏，上面有一些菜单项。还有一些条款。我无法使其在您悬停时，在主菜单项上显示带有子项的弹出框。主边栏的位置为：粘滞。需要在主菜单\u内容\u列表\u子菜单标记的弹出框中显示的内容。请帮我整理一下。非常感谢你

.main{
字体系列：PT SAN；
位置：相对位置；
显示器：flex；
弯曲方向：行；
最小高度：100%；
}
.主菜单{
显示器：flex；
弯曲方向：立柱；
宽度：自动；
背景色：#38618C；
填充：50px 50px 0 50px；
}
.主菜单内容{
显示器：flex；
弯曲方向：立柱；
位置：粘性；
顶部：50px；
宽度：100%；
}
.主菜单内容列表{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
文本对齐：居中；
高度：700px；
}
.主菜单内容列表li{
列表样式类型：无；
}
.主菜单内容列表a{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
字体风格：普通；
字体大小：正常；
字号：18px；
线高：23px；
颜色：#D7DFE8；
文字装饰：无；
}
.主要内容{
显示器：flex；
对齐项目：居中；
弯曲方向：立柱；
宽度：100%；
最大宽度：100%；
身高：100%；
}

我想这会对你有所帮助

.main{
字体系列：PT SAN；
位置：相对位置；
显示器：flex；
弯曲方向：行；
最小高度：100%；
}
.主菜单{
显示器：flex；
弯曲方向：立柱；
宽度：自动；
背景色：#38618C；
}
.主菜单内容{
显示器：flex；
弯曲方向：立柱；
位置：粘性；
顶部：50px；
宽度：100%；
}
.主菜单内容列表{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
文本对齐：居中；
高度：700px；
填充：0；
保证金：0；
}
.主菜单内容列表li{
列表样式类型：无；
}
.主菜单内容列表>li>a{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
字体风格：普通；
字体大小：正常；
字号：18px；
线高：23px；
颜色：#D7DFE8；
文字装饰：无；
填充：10px 15px
}
.主要内容{
显示器：flex；
对齐项目：居中；
弯曲方向：立柱；
宽度：100%；
最大宽度：100%；
身高：100%；
}
.主菜单内容列表子菜单{
位置：绝对位置；
填充：0；
保证金：0；
左：90%；
高度：100vh；
背景#f1f1；
排名：0；
指针事件：无；
不透明度：0；
过渡：所有线性0.1s 0s；
宽度：200px；
填充：10px0；
}
.主菜单内容列表li：悬停。主菜单内容列表子菜单{
不透明度：1；
指针事件：自动；
左：100%；
}
.主菜单内容列表子菜单li{}
.主菜单内容列表子菜单LIA{
填充：0 10px；
字号：18px；
线高：23px；
颜色：#ddd；
}

我想这会对你有所帮助

.main{
字体系列：PT SAN；
位置：相对位置；
显示器：flex；
弯曲方向：行；
最小高度：100%；
}
.主菜单{
显示器：flex；
弯曲方向：立柱；
宽度：自动；
背景色：#38618C；
}
.主菜单内容{
显示器：flex；
弯曲方向：立柱；
位置：粘性；
顶部：50px；
宽度：100%；
}
.主菜单内容列表{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
文本对齐：居中；
高度：700px；
填充：0；
保证金：0；
}
.主菜单内容列表li{
列表样式类型：无；
}
.主菜单内容列表>li>a{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
字体风格：普通；
字体大小：正常；
字号：18px；
线高：23px；
颜色：#D7DFE8；
文字装饰：无；
填充：10px 15px
}
.主要内容{
显示器：flex；
对齐项目：居中；
弯曲方向：立柱；
宽度：100%；
最大宽度：100%；
身高：100%；
}
.主菜单内容列表子菜单{
位置：绝对位置；
填充：0；
保证金：0；
左：90%；
高度：100vh；
背景#f1f1；
排名：0；
指针事件：无；
不透明度：0；
过渡：所有线性0.1s 0s；
宽度：200px；
填充：10px0；
}
.主菜单内容列表li：悬停。主菜单内容列表子菜单{
不透明度：1；
指针事件：自动；
左：100%；
}
.主菜单内容列表子菜单li{}
.主菜单内容列表子菜单LIA{
填充：0 10px；
字号：18px；
线高：23px；
颜色：#ddd；
}

*{
填充：0；
保证金：0；
}
梅因先生{
字体系列：PT SAN；
位置：相对位置；
显示器：flex；
弯曲方向：行；
最小高度：100%；
}
.主菜单{
显示器：flex；
弯曲方向：立柱；
宽度：自动；
背景色：#38618C；
/*填充：50px 50px 0 50px*/
}
.主菜单内容{
显示器：flex；
弯曲方向：立柱；
位置：粘性；
顶部：