6

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

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

4

3 回答 3

2

实际上，您的问题只能通过以下被低估的特征来解决box-shadow：

'box-shadow' 属性将一个或多个阴影附加到盒子上。该属性采用逗号分隔的阴影列表，从前到后排序。每个阴影都以 <shadow> 的形式给出，由 2-4 个长度值、一个可选的颜色和一个可选的“inset”关键字表示。
<阴影> = 插图？&& {2,4} && ?

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

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

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

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

于 2015-06-20T21:18:33.283 回答
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);
于 2015-06-20T20:28:17.833 回答
1

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

我为解决方案创建了一个小提琴。你可以在这里查看。 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内部<ul>的就是ul在这个父上下文中移动。因此它不能低于那个<nav>。

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

于 2015-06-20T20:30:43.013 回答