Html浮动列表与子列表正确对齐

正如您在下面的代码片段中看到的，我有一个UL元素和一些li元素。某些li元素的子元素是嵌套的UL。我想这将是一个主菜单。我选择将菜单分成三（3）列，将li的宽度设置为33%

请注意，所有ul和li都是通过代码动态创建的。因此，我不知道每个嵌套ul的长度。

如您所见，运行该代码段可以得到以下结果：

我试图找到一种方法来消除由于嵌套ul长度而产生的“间隙”。例如，第11项应位于第4项及其子项末尾的正下方

有可能是这样吗

.panel{
边框：1px实心#000；
浮动：左；
保证金：0自动；
填充：1em；
宽度：自动；
}
李先生{
浮动：左；
垫底：1米；
位置：相对位置；
宽度：33%；
}
李安{
字体大小：1.2米；
文字装饰：无；
}
儿童菜单{
左：1米；
浮动：无；
}
儿童菜单{
颜色：#333；
字号：1em；
}
/****************RESET.css************************/
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
许可证：无（公共域）
*/
html、正文、div、span、小程序、对象、iframe、，
h1、h2、h3、h4、h5、h6、p、块报价、预，
a、 缩写，首字母缩写，地址，大，引用，代码，
del、dfn、em、img、ins、kbd、q、s、samp、，
小、走向、强、次、辅助、tt、var、，
b、 u，i，中心，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td、，
文章、旁白、画布、细节、嵌入、，
图，figcaption，页脚，页眉，H组，
菜单、导航、输出、ruby、节、摘要、，
时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
/*旧浏览器的HTML5显示角色重置*/
文章，旁白，细节，图表，
页脚、页眉、H组、菜单、导航、节、主{
显示：块；
}
身体{
线高：1；
}
ol，ul{
列表样式：无；
}
区块报价，q{
报价：无；
}
blockquote:before，blockquote:after，
问：之前，问：之后{
内容：''；
内容：无；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}

对于那种布局，您需要javascript，搜索砌体或瀑布js等。对于那种布局，您需要javascript，搜索砌体或瀑布js等。