在下拉菜单中添加阴影

Question

我想在这里添加阴影： http: //prntscr.com/eiyg7i

• 但我无法弄清楚。

我添加了这段代码：

.nav-dropdown {
    box-shadow: none;
}

但它只是让盒子没有阴影。

编辑：我添加了这段代码

.nav-dropdown {
-webkit-box-shadow: 2px 6px 21px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 6px 21px -2px rgba(0,0,0,0.75);
box-shadow: 2px 6px 21px -2px rgba(0,0,0,0.75);
}

但它仍然出错http://94.247.169.169/~welloteket/ - 它仍然在顶部出现阴影

Answer 1

box-shadow您可以在水平和垂直方向上偏移。不幸的是，这样做会使阴影在您移动的一侧显得更加突出。

这对你有用吗？

http://codepen.io/connexo/pen/gmWjNJ

.bar {
  background-color: #f8f8f8;
  height: 60px;
}
.dropdown {
  height: 200px;
  width: 400px;
  margin: 0 auto 50px;
  box-shadow:     0      10px      10px       #666;
  /*              |        |         |
              x-shift      |         |
                        y-shift      |
                               size of shadow
  */
}


/* This uses z-index
.bar2 {
  background-color: #f0f0f0;
  height: 60px;
  z-index: 2;
  position: relative;
}
.dropdown2 {
  height: 200px;
  width: 400px;
  margin: 0 auto 50px;
  box-shadow: 0 0 10px #666;
}

<div class="bar"></div>
<div class="dropdown"></div>

<div class="bar2"></div>
<div class="dropdown2"></div>