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

Question

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

默认情况下，.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）

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

为什么要反转这个值？ 如何进行下拉菜单，以免遮挡主菜单？

Answer 1

我检查了它，我看到了最好的方法，因为JS来自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才能实现所需的行为）。

Answer 3

不是解决方案，但作为一种解决方法，我添加了一个＆＃34; spacer＆＃34;元素到下拉列表的顶部：

<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
}

结果如下：

Answer 4

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

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

       </mat-menu>

希望这有效