Html 如何在单击父菜单项后将内容设置为适当的结构？

当我点击元素打开

子菜单时

我的所有元素都会改变位置

如何在点击标题后设置内容，如下图所示

目前在我的案例中发生了什么，我正试图用图像来定义，这样你们就可以更好地理解我的问题

单击之前

元素

单击元素后，我的结构被分解，出现了一些间距，看起来不太好

单击后

元素

所以我想在点击任何元素后，设置如下图中的结构，它的设置方式和外观都很好

要求的结果

jQuery（文档）.ready（函数（）{
jQuery（'.parent level a'）。在（'click'，function（）上{
jQuery（this.toggleClass（'active'）；
jQuery（this）.next（'ul'）.slideToggle（）；
});
});
*{
框大小：边框框；
}
ulli{
列表样式：无；
}
.去梅加旅行.选择ul{
填充：0px；
边际：0px；
}
.前往mega.options>.a组{
字号：600；
宽度：100%；
显示：块；
边框底部：1px实心#EEEEE A；
填充：10px 20px 10px 0px；
位置：相对位置；
光标：指针；
字号：18px；
}
.前往mega.options>。a组{
字体大小：继承；
}
.选项ul li>div{
字号：18px；
字体大小：400；
填充：9px 10px；
边框底部：1px实心#EEEEE A；
颜色：var（--e-global-color-primary）；
}
.选项ul li.父级{
填充：0px；
}
li.父级li>div{
光标：指针；
}
li.父级ul{
显示：无；
}
。前往mega。选项>。a组：之前{
内容：“\f078”；
字体系列：“字体真棒5免费”；
字号：900；
位置：绝对位置；
右：3px；
最高：50%；
过渡：所有0.3秒缓解；
转化：translateY（-50%）；
}
.travel to mega.options>.group a.active:之前{
变换：translateY（-50%）旋转（180度）；
}
.选项ul li.父级{
边界：无；
}
.去梅加旅行.选择ul{
左侧填充：15px；
}
.选项包装{
位置：绝对位置；
最高：100%；
左：0；
右：0；
边缘顶部：5px；
背景色：#ffffff；
边界半径：6px；
盒影：0px 10px 20px rgb（0/10%）；
z指数：6；
}
.options>div{
字号：18px；
字体大小：400；
填充：9px 13px；
边框底部：1px实心#EEEEE A；
颜色：var（--e-global-color-primary）；
过渡：所有0.3秒缓解；
}
.options>.list链接：悬停{
颜色：var（--e-global-color-secondary）；
光标：指针；
}
.自定义选择标签{
光标：指针；
}
.travel to mega.options>.group{
宽度：33.33%；
浮动：左；
填充：0px 13px；
边界：无；
}
.去梅加旅行{
宽度：780px；
填充：15px 20px；
z指数：6；
}
.去梅加旅行.选择{
利润率：0px-13px；
}
.custom select>。选择：在{
内容：''；
位置：绝对位置；
最高：100%；
利润上限：-8px；
右：12px；
宽度：28px；
高度：14px；
背景：var（---fe6400 atl orange）0%0%无重复填充框；
背景：#FE6400%0%无重复填充框；
宽度：0px；
高度：0px；
左边框：11px实心透明；
右边框：11px实心透明；
边框底部：10px实心变量（--e-global-color-secondary）；
z指数：1；
不透明度：0；
}
.custom select>.select.open:之前{
不透明度：1；
}



Grækenland


米科诺斯


科夫岛


科斯


克雷塔-查尼亚奥格维斯特克雷塔


克雷塔-赫拉克利翁·奥古斯特克雷塔


罗多斯


圣托里尼






spanian


伊维萨


富尔特文图拉


兰扎罗特


梅诺卡


加那利大酒店


马洛卡


特内里费


太阳海岸/马拉加


巴塞罗那


马德里