Javascript 嵌套ul将父ul移动到子li元素的深度

我正在努力想办法让我的父母或

保持静止。我意识到这与我的定位有关，或者至少我认为是这样，但我不确定这是什么或者为什么。当前，当子项在每个项下展开时，整个父项都会随之展开

$（文档）.ready（函数（）{
$（'.main ul'）.children（'li'）.on（'click'，function（））{
$（this.children（'ul'）。slideToggle（'slow'）；
});
});
.home主导航菜单{
边框样式：双边框；
边框颜色：青色；
}
.主要项目{
显示：内联块；
文本对齐：居中；
左侧填充：5px；
右边距：10px；
边框样式：双边框；
边框颜色：紫色；
}
.分项{
列表样式类型：无；
文本对齐：左对齐；
左边距：-40.5px；
边框样式：双边框；
边框颜色：黄色；
}
.主要li项目>ul{
显示：无；
}
主保险商实验室{
边框样式：双边框；
边框颜色：绿色；
左边距：-3px
}
保险商实验室{
文本对齐：居中；
}





























如果将
垂直对齐：顶部
添加到
主li项目
中，则下拉列表将是向下的，而不是向上的


$（文档）.ready（函数（）{
$（'.main ul'）.children（'li'）.on（'click'，function（））{
$（this.children（'ul'）。slideToggle（'slow'）；
});
});
.home主导航菜单{
边框样式：双边框；
边框颜色：青色；
}
.主要项目{
显示：内联块；
垂直对齐：顶部；
文本对齐：居中；
左侧填充：5px；
右边距：10px；
边框样式：双边框；
边框颜色：紫色；
}
.分项{
列表样式类型：无；
文本对齐：左对齐；
左边距：-40.5px；
边框样式：双边框；
边框颜色：黄色；
}
.主要li项目>ul{
显示：无；
}
主保险商实验室{
边框样式：双边框；
边框颜色：绿色；
左边距：-3px
}
保险商实验室{
文本对齐：居中；
}





























您可以定位子菜单
absolute
，使其远离流程


$（文档）.ready（函数（）{
$（'.main ul'）.children（'li'）.on（'click'，function（））{
$（this.children（'ul'）。slideToggle（'slow'）；
});
});
.home主导航菜单{
边框样式：双边框；
边框颜色：青色；
}
.主要项目{
显示：内联块；
文本对齐：居中；
左侧填充：5px；
右边距：10px；
边框样式：双边框；
边框颜色：紫色；
}
.分项{
列表样式类型：无；
文本对齐：左对齐；
左边距：-40.5px；
边框样式：双边框；
边框颜色：黄色；
}
.主要li项目>ul{
位置：绝对位置；
显示：无；
}
主保险商实验室{
边框样式：双边框；
边框颜色：绿色；
左边距：-3px
}
保险商实验室{
文本对齐：居中；
}





























这就是你想要的吗

仅更改：

.main-li-items {
  ...
  vertical-align: top;
}


$（文档）.ready（函数（）{
$（'.main ul'）.children（'li'）.on（'click'，function（））{
$（this.children（'ul'）。slideToggle（'slow'）；
});
});
.home主导航菜单{
边框样式：双边框；
边框颜色：青色；
}
.主要项目{
显示：内联块；
文本对齐：居中；
左侧填充：5px；
右边距：10px；
边框样式：双边框；
边框颜色：紫色；
垂直对齐：顶部；
}
.分项{
列表样式类型：无；
文本对齐：左对齐；
左边距：-40.5px；
边框样式：双边框；
边框颜色：黄色；
}
.主要li项目>ul{
显示：无；
}
主保险商实验室{
边框样式：双边框；
边框颜色：绿色；
左边距：-3px
}
保险商实验室{
文本对齐：居中；
}