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/

Answer 2

评论你的最后一点CSS为我解决了这个问题（Chrome）。

#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;
}

#main_nav ul li ul li {
    //z-index: 0;
}

最后z-index:0似乎与之前指定的较高z-index冲突。

http://jsfiddle.net/j7fe099t/6/

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

2 个答案: