如何删除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但问题是，导航和下拉列表都有相同的box-shadow

对不起我的英语不好，我来自德国。

Answer 1

事实上，您的问题只能通过box-shadow：

的低估特征来解决

  

'box-shadow'属性会在框中附加一个或多个阴影。该属性采用以逗号分隔的阴影列表，从前到后排序。每个阴影都以＆lt; shadow＆gt;给出，由2-4个长度值，一个可选颜色和一个可选的'inset'关键字表示。
  ＆LT;阴影＆GT; =插入？ ＆安培;＆安培; {2,4}＆amp;＆amp; ？

您当前的box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16) 只有可能的＆lt; shadow＆gt;，如上所述。

你可以简单地将它添加到第一个（所以前面）＆lt; shadow＆gt;具有所需的特征，如：
box-shadow: #fff 0 -5px, 0 2px 10px 0 rgba(0, 0, 0, 0.16)，第一个实例的位置为：

• #fff必须与主<ul>颜色
颜色相同
• 0没有横向（右）阴影
• -5px生成一个垂直（本机向下，但在减号以来就是这里）阴影，这正是您需要隐藏前一个唯一（现在是第二个）实例生成的顶部阴影

然后你必须使用你的红色<ul> border-bottom进行管理，因为现在它也被隐藏了：你可以想象使用哪种方法。

Answer 2

尝试将您的下拉列表的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 3

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

我为解决方案创造了一个小提琴。你可以在这里查看。 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时，表示父级现在具有堆叠上下文。更改内部z-index的{​​{1}}正在移动此父上下文中的<ul>。因此，它不能低于ul。

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