如何删除 CSS 中下拉菜单的顶部框阴影？

Question

我需要帮助。如何删除 css 中顶部的框阴影？这是一张图片：https://picr.ws/images/b004e226b4eeb5616aa9d0bfdcb61b95.png

我这里有一个现场演示：www.hobbu.org

这里是一些片段：

html

<nav>
  <ul class="container_12">
    <li><a href="#">Home</a>
      <ul>
        <li><a href="#">Support</a></li>
        <li><a href="#">Einstellungen</a></li>
        <li><a href="#">Ausloggen</a></li>
      </ul>
    </li>
    <li><a href="#">Community</a></li>
    <li><a href="#">Extras</a></li>
    <li><a href="#">Shop</a></li>
  </ul>
</nav>

css

nav {
  width: 100%;
  height: 50px;
  background-color: #fff;
  position: relative;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
  -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
  -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  line-height: 50px;
  margin: 0px 20px;
  display: inline-block;
  float: left;
}

nav ul li:after {
  margin-top: -2px;
  content: '';
  display: block;
  border-bottom: solid 2px #ff4081;
  transform: scaleX(0.0001);
  transition: transform .3s ease-in-out;
  -webkit-transform: scaleX(0.0001);
  -ms-transform: scaleX(0.0001);
  -webkit-transition: -webkit-transform .3s ease-in-out;

}

nav ul li:hover > ul {
  display: block;
}

nav ul li:hover:after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

nav ul li a {
  display: block;
  color: #212121;
  text-decoration: none;
}

nav ul li > ul {
  width: auto;
  height: auto;
  z-index: 100;
  display: none;
  margin-left: -20px;
  background-color: #fff;
  position: absolute;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
  -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
  -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
  animation-name: fadeIn;
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
}

nav ul li > ul li {
  line-height: 35px;
  display: block;
  float: none;
}

nav ul li > ul li:after {
  margin-top: -3px;
  content: '';
  display: block;
  border-bottom: solid 0px transparent;
}

nav ul li > ul li a:hover {
  color: #ff4081;
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

我已经设置了下拉 z-index 但问题是，导航和下拉都有相同的框阴影

抱歉我的英语不好，我来自德国。

Answer 1

尝试将下拉菜单的 css 更改为：

  box-shadow: 0 5px 10px -2px rgba(0,0,0,.16);
  -webkit-box-shadow: 0 5px 10px -2px rgba(0,0,0,.16);

Answer 2

因为，从你的问题我可以解释你不想从任何一个元素中删除框阴影属性（根据我的说法，这是正确的做法），你可以附上另一个元素（如 <div>）内的子菜单（内部 <ul> 元素）并将内部 <ul> 和外部 <div> 的 CSS 更改为隐藏顶部阴影并继续显示所有其他阴影。

我已经为解决方案创建了一个 fiddle。你可以在这里查看。 http://jsfiddle.net/c5nLay4L/2/

基本上我们正在做的是将外部 <div>（带有 class = "submenu-container" 的那个）设置为隐藏超出其边界的任何内容（通过使用 overflow: hidden）。这样所有的阴影都会被隐藏起来。但我们只想隐藏顶部阴影。因此，我将 padding 添加到容器 <div> 的所有侧面（顶部除外）。这样，<div> 现在大到足以显示除顶部以外的所有其他阴影。然后你定位这个外部 div （用 position: absolute 和 top: 50px 将它放在与内部子菜单 <ul> 相同的位置（当然从 <ul>)

更改 z-index 不起作用的原因 更改 z-index 的效果取决于具有 z-index 的元素的堆叠上下文及其父级的堆叠上下文。

你可以在这里阅读 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

当您为 nav 元素提供更高的 z-index 时，这意味着父元素现在具有堆叠上下文。更改内部 <ul> 的 z-index 就是在此父上下文中移动 ul。因此它不能在 <nav> 之下。

为了更好地理解它，考虑一把放着一本书的椅子。你举起椅子，书也随之升起。你举起书，只有书升起，椅子没有任何反应。但是即使你强迫它，书也不能放在椅子的座位下面。它只能高出椅子的座位。当然除非你把椅子从书下面移开。然后书掉到椅子下面。这把椅子是你的<nav>。 Book 是内部子菜单 <ul>。只有改变堆叠上下文来避免这种父子容器关系，z-index才会开始生效

Answer 3

事实上，你的问题只能通过 box-shadow 被低估的特性来解决：

The ‘box-shadow’ property attaches one or more drop-shadows to the box. The property takes a comma-separated list of shadows, ordered front to back. Each shadow is given as a <shadow>, represented by 2-4 length values, an optional color, and an optional ‘inset’ keyword.
<shadow> = inset? && {2,4} && ?

您当前的 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16) 只是上述可能的中的一个。

您可以简单地在它前面添加一个具有所需特征的第一个（前面的），例如：
box-shadow: #fff 0 -5px, 0 2px 10px 0 rgba(0, 0, 0, 0.16)，其中第一个实例有：

#fff 必须与母版颜色相同 <ul> 颜色
0 没有水平（右）阴影
-5px 制作垂直（原本向下，但由于减号而向上）阴影，这正是您隐藏由之前的唯一（现在是第二个）实例生成的顶部阴影所需要的

然后你必须用你的红色 <ul> 边框底部来管理，因为现在它也被隐藏了：你可以想象使用哪种方法。

如何删除 CSS 中下拉菜单的顶部框阴影？

How do i remove the top box-shadow of a dropdown-menu in CSS?

html

css

box-shadow