隐藏在内容后面的下拉菜单？答案

【问题标题】：Dropdown menu hiding behind content?隐藏在内容后面的下拉菜单？
【发布时间】：2016-11-11 05:35:40
【问题描述】：

所以我是新手，一直在尝试在我在网上找到的主题上放置一个下拉菜单。我已经让它大部分工作了，但是，下拉菜单隐藏在主要内容后面。我知道这是问题所在，因为当我调整“.menu ul #listcontain”的顶部填充时它可以工作，但它会将照片移动到我不想要的地方。我觉得我已经尝试了所有方法（调整 z 索引、位置等），但仍然无法弄清楚。我一个月前才开始这样做，有人可以帮助我吗？非常感谢。

那么对于 CSS，我有这个（只是菜单。这是一个很大的页面，所以我试图只包含我需要的部分）：

*{padding:0; margin:0;}
body{ font-family:Arial, Helvetica, sans-serif; font-size:12px;      color:#1491c1; background:url(../images/bg.jpg) repeat;}
img{border:none;}
h1{ font-family: 'Droid Serif', serif; font-weight:normal; color:#fff;}
h2{ font-family: 'Droid Serif', serif; font-weight:normal; color:#fff; font-   size:18px;}
P{ line-height:20px;}
a{text-decoration:none; color:#1491c1;}
a:hover{color:#fff;}

/*-------------------------------------------------
GENERAL CLASSES
-------------------------------------------------*/
.mar-top{ margin-top:40px;}
.mar-top30{ margin-top:30px;}
.mar-bottom{ margin-bottom:40px;}
.mar-Right{ margin-right:40px;}
.mar-right115{ margin-right:115px;}
.float-left{ float:left;}
.float-right{ float:right;}
.clearing { clear:both;}
.bor-bottm-non{border-bottom:none!important;}
.panel{}
.title{}
.content{}
.wrap{width:960px; margin:0 auto;overflow:hidden; background:url(../images/page-bg.jpg);}
.page{ width:580px; margin:0 auto;overflow:hidden; padding-bottom:50px;}
.page-content{ width:580px; margin:0 auto;overflow:hidden; padding-  bottom:30px; padding-top:30px;}
.block{padding:20px 20px 20px 20px; margin:0 auto;}
.block2{padding:20px 20px 20px 20px; margin:0 auto;}
.button a{text-decoration:none; display:block; width:70px; height:30px;  background:#1491c1; color:#ffffff; font-family:Arial, Helvetica, sans-serif;  line-height:30px; text-align:center;}
.button a:hover{ background:#0e5295;}

/*------------------------------------------------- 
CONTENT CLASSES
-------------------------------------------------*/
.page-content{ width:580px; margin:0 auto;overflow:hidden; padding-  bottom:30px; padding-top:30px;}
.page-content .content h3{ padding-bottom:20px;font-family: 'Droid Serif',   serif; font-weight:normal; color:#fff; font-size:16px;}
.page-content .content p{ padding-bottom:15px;}

/*-------------------------------------------------  
HEADER CLASSES
-------------------------------------------------*/
.header-wrap{ background:#083266; height:162px; width: 960; }
.header{ width:1200px; margin:0 auto; z-index: 11;}
.logo{ float:left; background:#1491c1; width:300px;  }
.logo h1{font-size:25px; text-align:left; padding:40px 0px 36px 25px ; 
}

.menu ul #listcontain{ list-style:none; float: left; border-right:#093e76  solid 1px; padding: 0px 20px 30px 20px; }
.menu ul #listcontain a{ text-decoration:none; color:#80d2f8; font-  size:14px; text-align:center;padding-right: 5px;}
.menu ul #listcontain a:hover{ color:#1491c1;}
.menu ul #listcontain a.active{ color:#1491c1;}

* {
  box-sizing: border-box;
}

#main {
  position: relative;
  list-style: none;
  background: #083266;
  font-weight: 400;
  font-size: 0;
  text-transform: none;
  display: inline-block;
  padding: 118px 0px 0px 0px;
  margin: 0 auto;
}
#main li {
  color: #ffffff;
  font-size: 0.8rem;
  display: inline-block;
  position: relative;
  padding: 13px 20px;
  cursor: pointer;
  z-index: 5;
  min-width: 120px;
}

li {
  margin: 0;
}

#marker {
  height: 6px;
  background: #1491c1 !important;
  position: absolute;
  bottom: 0;
  width: 120px;
  z-index: 2;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  transition: all 0.35s;
}

#main li:nth-child(1):hover ul div {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
#main li:nth-child(1):hover ~ #marker {
  -webkit-transform: translate(0px, 0);
  -moz-transform: translate(0px, 0);
  -ms-transform: translate(0px, 0);
  transform: translate(0px, 0);
}
#main li:nth-child(2):hover ul div {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
#main li:nth-child(2):hover ~ #marker {
  -webkit-transform: translate(130px, 0);
  -moz-transform: translate(130px, 0);
  -ms-transform: translate(130px, 0);
  transform: translate(133px, 0);
}
#main li:nth-child(3):hover ul div {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
#main li:nth-child(3):hover ~ #marker {
  -webkit-transform: translate(260px, 0);
  -moz-transform: translate(260px, 0);
  -ms-transform: translate(260px, 0);
  transform: translate(269px, 0);
}

#main li:nth-child(4):hover ul div {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
#main li:nth-child(4):hover ~ #marker {
  -webkit-transform: translate(360px, 0);
  -moz-transform: translate(380px, 0);
  -ms-transform: translate(360px, 0);
  transform: translate(397px, 0);
} 
#main li:nth-child(5):hover ul div {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
#main li:nth-child(5):hover ~ #marker {
  -webkit-transform: translate(360px, 0);
  -moz-transform: translate(380px, 0);
  -ms-transform: translate(360px, 0);
  transform: translate(529px, 0);
}

#drops {
  overflow: hidden;
  list-style: none;
  position: absolute;
  padding: 0;
  width: 100%;
  left: 0;
  top: 58px;

}
#drops div {
  -webkit-transform: translate(0, -100%);
  -moz-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  transform: translate(0, -100%);
  -webkit-transition: all 0.5s 0.1s;
  -moz-transition: all 0.5s 0.1s;
  -ms-transition: all 0.5s 0.1s;
  transition: all 0.5s 0.1s;
  position: relative;
}
#drops li {
  display: block;;
  padding: 0;
  width: 100%;
  background: #3E8760 !important;
  z-index: 10;
}

<link href='http://fonts.googleapis.com/css?family=Droid+Serif'   rel="stylesheet" type="text/css">

<nav>
  <div class="wrap">
    <div class="header">
      <div class="logo"><h1>JHT Market Development Team (MDT) Site</h1></div>
      <div class="menu" id="main">
        <ul>
          <li id="listcontain"><a href="index.html" class="active">Home</a></li>
          <li id="listcontain"><a href="about.html">MDT Resources </a>
            <ul class="drop" id="drops">
              <div>
                <li>MDT Calender</li>
                <li>MDT Agendas</li>
                <li>Meeting Materials</li>
              </div>
            </ul>
          <li id="listcontain"><a href="services.html">Proposals          </a></li>
          <li id="listcontain"><a href="solutions.html">  CSO Priorities  </a></li>
          <li id="listcontain"><a href="contact.html">Contact MDT</a></li>
          <div id="marker"></div>
        </ul>
      </div>
    </div>
  </div>
</nav>

我相信问题出在某个通用类的某个地方，但我不知道如何在不搞砸整个页面的情况下解决它。

【问题讨论】：

仅使用 nav HTML 很难给出准确的答案，但您可能需要调整 nav 元素的 z-index。每当您需要在另一个元素前面对某些东西进行 z-index 时，z-index 需要在兄弟元素而不是子元素之间应用 - 如果您将 z-index 添加到下拉列表本身，它只会与顶级链接进行比较因为这些是兄弟元素。让我知道这是否有意义！
嗯，这似乎不起作用，但我明白你在说什么！到目前为止唯一有效的是从 .wrap 标记中删除“overflow:hidden”元素，但是，这会将整个底部（或我猜的页脚）移动到页面的右上角。对此有什么想法吗？我不知道我是否应该只发布整个页面或不让它更容易。
你有运行代码的链接吗？
我将#main 位置更改为绝对位置并摆弄z-indexes，你是对的。哈哈，很抱歉，感谢您的帮助！
没问题！是的，您要进行 z 索引的两个元素也需要将位置设置为除静态之外的任何内容。抱歉我没听清楚！

标签： html css drop-down-menu dropdown

【解决方案1】：

将菜单的 z-index 更改为 z-index 1，将页面的其余部分更改为 z-index 0。我认为这会奏效......

【讨论】：

【解决方案2】：

这是因为你给.wrap类overflow:hidden;，所以如果你删除它，submenu会出现，或者如果你在.header之后添加一些内容，菜单也会出现在这种情况下

【讨论】：

【解决方案3】：

我猜测由于菜单的 DOM 位于正文之前，因此绝对定位导致主要内容堆叠在顶部。

想象一下两个相邻的 div，第一个被赋予绝对定位。第二个 div 会出现在第一个上，因为这正是 DOM 呈现的方式。

正如@will 在他的评论中所说，添加 z-index 可能是最好的方法。

【讨论】：