css - 在多级菜单中隐藏其父 li 元素下方的框阴影

Question

我正在学习 css 中的多级菜单

#main_nav ul {
  background: white;
  float: left;
  -webkit-transition: .5s;
  transition: .5s;
  padding: 0px;
}
#main_nav li {
  float: left;
  position: relative;
  width: 150px;
  list-style: none;
  -webkit-transition: .5s;
  transition: .5s;
}
#main_nav > ul > li > a,
h1 {
  text-transform: uppercase;
}
#main_nav a {
  display: block;
  text-decoration: none;
  padding: 5px 15px;
  color: #000;
}
#main_nav ul ul {
  z-index: 10;
  position: absolute;
  left: 0;
  top: 100%;
  visibility: hidden;
  opacity: 0;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
  font-size: 14px;
  list-style: none;
  background-color: #fff;
}
#main_nav ul ul ul {
  left: 100%;
  top: 0;
  margin-left: -10px;
  position: absolute;
  z-index: 2;
}
#main_nav li:hover,
#main_nav li:hover li {
  background: #ddd;
}
#main_nav li li:hover,
#main_nav li li:hover li {
  background: #bbb;
}
#main_nav li li li:hover {
  background: #999;
}
#main_nav li:hover > ul {
  visibility: visible;
  opacity: 1;
}

<nav id="main_nav">
  <ul>

    <li>
      <a href="">Mammals</a>
      <ul>
        <li>
          <a href="">Monotremes</a>
          <ul>
            <li><a href="">Echidnas</a>
            </li>
            <li><a href="">Platypus</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="">Marsupials</a>
          <ul>
            <li><a href="">Opossums</a>
            </li>
            <li><a href="">Numbats, etc.</a>
            </li>
            <li><a href="">Bandicoots, etc.</a>
            </li>
            <li><a href="">Kangaroos, koalas, wombats, etc.</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="">Placentals</a>
          <ul>
            <li><a href="">Primates, ungulates, etc.</a>
            </li>
            <li><a href="">Anteaters, sloths, etc.</a>
            </li>
            <li><a href="">Elephants, etc.</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>


  </ul>
</nav>

问题是我无法将最后一级菜单框阴影隐藏在其父元素 li 下

我也试过 z-index 但它不起作用

fiddle

Answer 1

尝试

#main_nav ul ul { z-index: 1; }
#main_nav ul ul ul { z-index: 2; }

注意 li 标签，因为它会混淆一切。

http://jsfiddle.net/j7fe099t/3/