materializecss，垂直偏移下拉菜单内容

Question

我正在尝试向导航栏添加一个下拉菜单，如此处的文档所述。

默认情况下，.dropdown-content设置为top: 0;。这是默认行为：

如果将顶部更改为50px，materialize.css则实际上将其向上移动50像素并将元素样式设置为top: -50px。

这是代码：

.dropdown-content {
    top: 50px;
}

但是在渲染时，该元素如下所示：

<ul id="dropdown1" class="dropdown-content" tabindex="0" style="display: block; width: 139.297px; left: 900.891px; top: -50px; height: 216px; transform-origin: 0px 0px 0px; opacity: 1; transform: scaleX(1) scaleY(1);">

（关键是`top：-50px;）

我测试了多个值，这里是65：

.dropdown-content {
    top: 65px;
}
<ul id="dropdown1" class="dropdown-content" tabindex="0" style="display: block; width: 139.297px; left: 900.891px; top: -65px; height: 216px; transform-origin: 0px 0px 0px; opacity: 1; transform: scaleX(1) scaleY(1);">

（现在是top: -65px）

这是一个截图，如果您想看看

为什么要反转此值？ 如何制作下拉菜单，使其不遮挡主菜单？

Answer 1

我检查了一下，我看到了最好的方法，因为样式来自JS，我检查了它有特殊的计算，如果您想避免任何固定的高度，可能会在标头中添加填充或其他内容，因此最好给出在top:100%并用!important比的JS强

上课 .dropdown-content top: 100% !important;

.dropdown-content {
  top: 100% !important;
}

Answer 2

看来此选项已 通过实例化选项添加到Materialize v1.0.0：https：//materializecss.com/dropdown.html中 coverTrigger。它默认为true（必须设置为false才能实现所需的行为）。