防止下拉显示在另一个div后面

Question

我正在尝试制作一个下拉菜单jsFiddle。但它实际上下降并消失在另一个div后面。我尝试用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href='#' data-test='some text'>Click Me</a>修复它，但它没有帮助。

z-index

div {
  padding: 1px;
}
#pageWrap {
  margin: auto;
  width: 800px;
  overflow: auto;
}
#header {
  background-color: #efefef;
  width: 100%;
  height: 200px;
  margin: 15px 0px 15px 0px;
}
.menu {
  margin: 0px 0px 15px 0px;
  overflow: hidden;
  background-color: #333;
  list-style-type: none;
}
.menu li {
  float: left;
}
.menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.menu ul {
  position: absolute;
  left: -9999px;
  top: -9999px;
  list-style-type: none;
}
.menu li:hover {
  position: relative;
  background: #111;
}
.menu li:hover ul {
  left: 0px;
  top: 40px;
  padding: 0px;
  background: #222;
}
.menu li:hover ul li a {
  padding: 5px;
  display: block;
  width: 168px;
  text-indent: 5px;
}
.menu li:hover ul li a:hover {
  background: #111;
}
#content {
  font-family: sans-serif;
  text-align: justify;
}
.title {
  font-size: 2em;
}
.subtitle {
  font-size: 1.5em;
  font-style: italic;
}
.date {
  color: grey;
}
.articleText {
  margin-bottom: 35px;
}
#footer {
  text-align: center;
}
#bottomBar {
  text-align: right;
}

Answer 1

容器上的overflow:hidden使其不可见。您可以使用另一种明确的浮动技术。

.menu{  
  margin: 0px 0px 15px 0px;
  /* overflow: hidden; */
  background-color: #333;
  list-style-type: none;    
}
.menu:after {
  content: "";
  display: table;
  clear: both;
}

<强> Updated fiddle