css - 如何在 Semantic Ui React Navbar Menu 上制作阴影

Question

我试图在导航栏上制作阴影......我知道如何制作阴影，但它不适用于我的导航栏。

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

我故意但是绿色边框，所以你可以看到我没有输入错误的类名。

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

这是我的导航栏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 ://codesandbox.io/s/xenodochial-darwin-lr55t

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

标签： cssreactjsmenunavbarshadow

Answer 1

由于.box背景颜色，您的阴影正在工作但不可见。删除背景颜色或将menudiv移动到pushablediv 中。

或者

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