我需要帮助。我如何删除 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 但问题是，导航和下拉都有相同的框阴影

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

最佳答案

事实上，您的问题只能通过 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> border-bottom，因为现在它也被隐藏了:你可以想象使用哪种方法。

关于html - 如何删除 CSS 中下拉菜单的顶部框阴影？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30957870/