Question

我无法让z-index在主页上的主要英雄形象上方显示我的下拉菜单。

访问的网站是：auldlangsynegoods.com。我希望有人可以使用一些开发工具来查看网站，并找出为什么没有出现这种下拉。

这是干净简单的html：

<nav id="mainNav" role="navigation" class="cf">
    <h2>Site navigation</h2>
    <ul class="topMenu">
      <li class="hover">
        <h3>Infant and Baby</h3>
        <ul class="subMenu">
          <li><a href="shoes_and_accessories.html" title="Infant and Baby Shoes">Shoes</a></li>
          <li><a href="shoes_and_accessories.html" title="Infant and Baby Hats">Hats</a></li>
          <li><a href="shoes_and_accessories.html" title="Infant and Baby Clothing">Clothing</a></li>
        </ul>
      </li>
      <li><a href="millinery.html" title="Millinery Also Known as Hats">Millinery</a></li>
      <li class="hover">
        <h3>Shoes and Accessories</h3>
        <ul class="subMenu">
          <li><a href="shoes_and_accessories.html" title="Shoes and Accessories - Mens Shoes">Mens Shoes</a></li>
          <li><a href="shoes_and_accessories.html" title="Shoes and Accessories - Womens Shoes">Womens Shoes</a></li>
          <li><a href="shoes_and_accessories.html" title="Shoes and Accessories - Bags">Bags</a></li>
        </ul>
      </li>
      <li class="hover">
        <h3>Organic Skincare</h3>
        <ul class="subMenu">
          <li><a href="Organic_Skincare.html" title="Organic Skincare - Body">Body</a></li>
          <li><a href="shoes_and_accessories.html" title="Organic Skincare - Face">Face</a></li>
        </ul>
      </li>
      <li><a href="Garments.html" title="Garments">Garments</a></li>
    </ul>
  </nav>

以下是桌面视图的简洁CSS：

/*nav styles*/
#mainNav {
    padding-left:3.9%;
    margin-bottom: 1.5em;
}

#mainNav li {
    float: left;
}

#mainNav a {

    display: block;
    color: #383420;
    border: none;
}

#mainNav a:hover {
    color: #484329;
}

#mainNav a.current {
    color: #A6A6A6;
    cursor: default;
}
/*nav styles*/
#mainNav {
    padding-left: 3.9%;
    margin-bottom:1em;
}
#mainNav li {
    margin-right: 3%;
    position: relative;
}
#mainNav a, #mainNav h3 {
    font-size: 1.2em;
    text-align: left;
    padding: 0 1em;
}
/*dropdown menu styles*/
#mainNav ul.subMenu {
    float: none;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    padding-top: 2.8em;
    left: -8000em;
    max-height: 0;
    -moz-transition:max-height 0.5s ease;
    -webkit-transition:max-height 0.5s ease;
    -o-transition:max-height 0.5s ease;
    transition:max-height 0.5s ease;
    overflow: hidden;
    z-index: 5;
}
#mainNav ul.subMenu li {
    float: none;
    margin: 0;
    background: rgb(76, 67, 65);
    background: rgba(76, 67, 65, .9);
}
#mainNav li:hover ul {
    left: 0;
    max-height: 20em;
}
#mainNav ul.subMenu li a {
    border-bottom: 1px solid white;
    padding: .2em 1em;
    white-space: nowrap;
    color: white;
    text-align: left;
    font-size: 1.1em;
}
#mainNav ul.subMenu li:last-child a {
    border-bottom: none;
}
#mainNav ul.subMenu li a:hover {
    background: rgb(123, 121, 143);
}

Answer 1

在您提供的网站上，看起来z-index不是问题，而是您需要从{

}删除overflow: hidden;

#mainNav {
    overflow: hidden;
    margin-bottom: 1.5em;
}

使用chrome web dev工具删除该样式后，我能够看到下拉列表。

带有CSS转换的CSS下拉菜单Z-Index无法正常工作

1 个答案: