Html 并行下拉式多级菜单

我正在尝试创建一个与子列表并行的下拉多级菜单，如图所示：

子列表必须是平行的，而不是对角的，这在多级菜单中很常见：

如果我使用独立div而不是子列表，我看不出如何告诉子类别div选择了哪个父类别元素

我的尝试：

*，
*：：之前，
*：：之后{
框大小：边框框；
-webkit框大小：边框框；
}
身体{
字体系列：无衬线；
保证金：0；
填充：10px；
}
.下拉列表{
保证金：0；
填充：0；
列表样式：无；
宽度：100px；
背景色：#0abf53；
}
.下拉列表李{
位置：相对位置；
}
.下拉列表李a{
颜色：#ffffff；
文本对齐：居中；
文字装饰：无；
显示：块；
填充：10px；
}
.下拉列表{
位置：绝对位置；
排名：0；
左：100%；
保证金：0；
填充：0；
列表样式：无；
显示：无；
线高：正常；
背景色：#333；
}
.下拉列表li ul li a{
文本对齐：左对齐；
颜色：#中交；
字体大小：14px；
填充：10px；
显示：块；
空白：nowrap；
}
.下拉列表li ul li a:悬停{
背景色：#0abf53；
颜色：#ffffff；
}
.下拉列表li ul li ul{
左：100%；
排名：0；
}
ul li：悬停>a{
背景色：#0abf53；
颜色：#ffffff！重要；
}
ul li：悬停>ul{
显示：块；
}

在

中删除规则
顶部：0
和
左侧：100%
。下拉列表li ul

，并从

中删除
位置：相对
。下拉列表li

*，
*：：之前，
*：：之后{
框大小：边框框；
-webkit框大小：边框框；
}
身体{
字体系列：无衬线；
保证金：0；
填充：10px；
}
.下拉列表{
保证金：0；
填充：0；
列表样式：无；
宽度：100px；
背景色：#0abf53；
}
.下拉列表李{
/*位置：相对位置*/
}
.下拉列表李a{
颜色：#ffffff；
文本对齐：居中；
文字装饰：无；
显示：块；
填充：10px；
}
.下拉列表{
位置：绝对位置；
/*排名：0；
左：100%*/
保证金：0；
填充：0；
列表样式：无；
显示：无；
线高：正常；
背景色：#333；
}
.下拉列表li ul li a{
文本对齐：左对齐；
颜色：#中交；
字体大小：14px；
填充：10px；
显示：块；
空白：nowrap；
}
.下拉列表li ul li a:悬停{
背景色：#0abf53；
颜色：#ffffff；
}
.下拉列表li ul li ul{
左：100%；
排名：0；
}
ul li：悬停>a{
背景色：#0abf53；
颜色：#ffffff！重要；
}
.下拉列表：悬停*{
显示：块；
}
.下拉列表>li>ul:悬停ul{
显示：无；
}
li：悬停>a.drop+ul{
显示：块！重要；
}

像那样吗我认为是这样。喜欢我的第一张照片。非常感谢！当悬停“菜单”按钮时，是否可以同时显示三个子菜单？第一次它应该只显示第一个元素的子列表，如果我选择第二个元素，它会更改子列表的内容，等等@FiveString，我已经更新了片段。这是你需要的结果吗？谢谢。不完全是。第一步是正确的：显示整个菜单。但是，如果我在“尼斯下拉菜单”中有一个子列表，它应该在第一步中显示它的子列表；如果我在“Submenu-1”中有另一个子列表，并将其悬停，它应该更改右侧的两个子列表，以显示“Submenu-1”的子列表。这有点乱，对不起…@FiveString，很长一段时间我都不明白你在描述什么结果。他似乎直到现在才明白。但我更新了我的代码片段。您需要这样的结果吗？请为造成的混乱道歉。这就是我想要实现的：。。。但是只使用CSS，或者至少不使用垃圾JS。（（单击菜单-显示->1 | 1.1 | 1.1.1））（（单击1.2-显示->1 | 1.2 | 1.2.1））（（单击2-显示->2 | 2.1 | 2.1.1））