如何在 Semantic Ui React Navbar Menu 上制作阴影答案

【问题标题】：How to make a shadow on Semantic Ui React Navbar Menu如何在 Semantic Ui React Navbar Menu 上制作阴影
【发布时间】：2021-09-16 02:10:57
【问题描述】：

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

这是我的导航栏的样子...

我故意用绿色边框，这样你就可以看到我没有输入错误的类名。

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

这是我的导航栏 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

【问题讨论】：

【解决方案1】：

由于.box background-color，您的阴影正在工作但不可见。删除背景颜色或将menu div 移到pushable div 中。

或者

添加 position: relative; 风格到这个类.ui.secondary.pointing.menu

【讨论】：

你能喜欢编辑我的沙箱并分享我的链接编辑吗：Nvm 它确实有效，但我怎样才能制作内容？此外，如果我尝试将我的菜单移动到可推送 div 中，一切都会被破坏，所以那是没有的
你在线吗？
将position: relative; 样式添加到此类.ui.secondary.pointing.menu
你真的修好了。谢谢！享受您的投票和复选标记！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

没有一个答案对我有用，所以我只是添加：

z-index:1 相当于你的 .ui.secondary.pointing.menu 类

所以标题和它的影子被向前推

如果您指定足够多的指向您的标头的指针，则不需要!important

【讨论】：