Javascript 应用CSS“；显示：无“；使较高的元素下降

我正在处理一个自定义导航栏类，这个bug涉及处理下拉菜单等的机制。下面是相关测试代码的示例和说明

HTML:

这是唯一一个不需要默认的CSS。即，除

nav菜单容器

元素外的每个div都设置为

display:block。
从这里开始，CSS的另一个变化来自于JS将
导航栏
元素的高度设置为
菜单标签
元素的任何高度（在屏幕截图中，我突出显示
导航栏
元素来显示这一点）。
接下来，我有测试页面的屏幕截图，首先显示未更改的页面，然后显示
菜单列表容器
元素之一设置为
显示：无的页面并显示我所指的bug。

所以我的问题是为什么
菜单标签
元素会下拉而不是停留在顶部？我注意到它只是将其底边与另一个
菜单容器的底边对齐，因为如果我将另一个
菜单列表设置为
显示：无每个标签返回到屏幕顶部。有人知道这是什么原因吗？还是一种干净的方法来避免这种情况发生？
这是因为
内联块
元素沿着基线对齐，基线是可见文本的最后一行（如果其中有文本，这里就是这种情况）

因此，您只需添加
垂直对齐：top
到
.nav菜单容器的CSS规则，它们将根据需要对齐。
请分享一个很好的例子，我知道这很简单。谢谢你的启示！
<div class="nav-bar" id="main">
    <div class="menu-container" id="menu1">
        <div class="menu-label"> Menu Head 1 </div>
        <div class="menu-list-container">
            <div class="menu-item"> Item 1 </div>
            <div class="menu-item"> Item 2 </div>
            <div class="menu-item"> Item 3 </div>
        </div>
    </div>
    <div class="menu-container" id="menu2">
        <div class="menu-label"> Menu Head 2 </div>
        <div class="menu-list-container">
            <div class="menu-item"> Item 1 </div>
            <div class="menu-item"> Item 2 </div>
            <div class="menu-item"> Item 3 </div>
        </div>
    </div>
</div>

.nav-menu-container {
    display: inline-block;
}