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

【问题标题】：materializecss, vertically offset dropdown menu contentmaterializecss，垂直偏移下拉菜单内容
【发布时间】：2018-05-17 14:45:57
【问题描述】：

我正在尝试在我的导航中添加一个下拉菜单，详见the docs here。

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

如果我在materialize.css 中将顶部更改为50px，它实际上会将其向上移动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）

Here's a screenshot if you care to take a look

为什么要反转这个值？ 如何使下拉菜单不遮挡主菜单？

【问题讨论】：

Do not post images of code or errors! 图片和屏幕截图可以很好地添加到帖子中，但请确保帖子在没有它们的情况下仍然清晰有用。如果您发布代码或错误消息的图像，请确保您还复制并粘贴或直接在帖子中输入实际代码/消息。
Rob，在这种情况下，屏幕截图是调试器的屏幕截图，它清楚地显示了元素正在呈现-65px，即使在代码中我设置了65px。它不是代码本身的屏幕截图。在标记关闭之前，请更仔细地阅读帖子，或要求澄清。
删除图像，没有标记或代码可以帮助您，并且存在问题。请在回复之前阅读我给你的链接。
我已经编辑了我的问题。请撤销您的投票。

标签： css materialize

【解决方案1】：

我检查了它，我看到了最好的方法，因为样式来自 JS，它有我检查过的特殊计算，如果你想避免任何固定高度，也许你会在标题中有填充或任何东西，所以最好给top:100%，用!important比JS强

上课.dropdown-contenttop: 100% !important;

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

【讨论】：

即时修复。谢谢！
@AdelElkhodary 这是一个很棒的快速修复，谢谢！我很好奇为什么在 Materialise 的早期版本中，这有效，但在当前版本 (1.0.0) 中，下拉菜单现在将其内容覆盖在激活器上。

【解决方案2】：

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

【讨论】：

与其他答案相比，这不是解决方法，而是真正的解决方案。这对我有用： $(".dropdown-trigger").dropdown({coverTrigger: false});

【解决方案3】：

不是一个解决方案，但作为一种解决方法，我在下拉列表的顶部添加了一个“spacer”元素：

<li class="spacer"></li>

.dropdown-content {
    background: none;  //overwrites default materialzie value of white
}

.dropdown-content li > a, .dropdown-content li > span {
    background-color: white;  //needed now that the whole menu has no background
}
.dropdown-content li:hover, .dropdown-content li.active {
    background: none; //no white on hover
}

.dropdown-content li.spacer {
    min-height: 65px;  //height of the nav element
    cursor: default;  //so it doesn't look like a menu option
    opacity: 0;  //the magic
}

结果如下：

【讨论】：

【解决方案4】：

  <mat-menu class="abc" #menu="matMenu" [overlapTrigger]="false">
          <div mat-menu-item  >
           11111
          </div>

               <div mat-menu-item  >
           22222222
          </div>

       </mat-menu>

希望这可行

【讨论】：

一点上下文可能会有用。 mat-menu 是什么？聚合物元素还是什么？我没有使用任何网络组件。如果它是 materializecss 的一部分，请链接到文档，我没有看到它。基本上这些都没有意义。对不起。