css – 如何使用z-index对盒子阴影进行分层？

HTML

<div id="a">
  <div id="b">bbb</div>
  <div id="c">
    <ul>
      <li>a</li>
      <li class="current">b</li>
      <li>c</li>
      <li>d</li>
    </ul>
  </div>
</div>
<div id="d">dddd
</div>

CSS

#b {
  BACkground: orange;
  box-shadow: 0 0 10px black;
  z-index: 2;
  position: relative;
}

#c {
  BACkground: red;
  z-index: 1;
  position: relative;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 1;
  position: relative;
}
li {
  display: inline-block;
  padding: 2px 5px;
}

.current {
  BACkground-color: orange;
  z-index: 3;
  position: relative;
}

#d {
  box-shadow: 0 0 10px black;
  z-index: 2;
}

看看代码笔.我的层数或多或少都是我想要的,除了我希望“b”标签位于由上面的橙色div引起的盒子阴影之上.

要详细说明,橙色#b div应该在红色#c div上投射阴影,.current选项卡应该与橙色#b div齐平(没有阴影),#d不应该在#上投射阴影# c.

问题是.current上的z-index似乎不起作用.