如何在语义 Ui React Navbar 菜单上制作阴影

Question

我正在尝试在导航栏上制作阴影...我知道如何制作阴影，但它在我的导航栏上不起作用。

这是我的导航栏的图片...

我故意用绿色边框所以你可以看到我没有输入错误的 class 名称。

我在导航栏和框上放了一个红色阴影...

这是我的 css 导航栏：

.ui.secondary.pointing.menu {
  border-bottom: 3px solid green !important;
  box-shadow: 3px 3px 6px red !important;
}

这里是盒子：

.box {
  height: 200px;
  background-color: blanchedalmond;
  box-shadow: 3px 3px 6px red !important;
}

您可以在这里预览： https://ml88b.csb.app/admin

Answer 1

您的影子有效但由于 .box 背景颜色不可见。删除背景颜色或将 menu div 移到 pushable div.

内

或

添加 position: relative; 样式为此 class .ui.secondary.pointing.menu

Answer 2

希望你明白，问题是什么。

.ui.secondary.pointing.menu {
  margin-bottom:1rem;
  box-shadow: 3px 3px 6px red !important;
}

Answer 3

none 的答案对我有用，所以我只添加：

z-index:1 相当于您的 .ui.secondary.pointing.menu class

因此 header 及其影子被向前推

如果您指定了足够多的指针，则不需要 !important header

How to make a shadow on Semantic Ui React Navbar Menu