下拉菜单隐藏在标题元素之外

Question

我一直在尝试在网站的标题导航中添加一个下拉菜单，但是标题元素之外的下拉列表将无法显示。

这是显示问题的jsFiddle。我已经尝试将溢出设置为可见，但到目前为止还没有起作用。如果有人能指出我正确的方向，我真的很感激

代码：

header {
background-color: white;
width: 100%;
overflow: visible;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
header:after {
content: "";
display: table;
clear: both;
}
header .oc {
height: 105px;
position: relative;
display: inline-block;
width: 100%;
}
.oc {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
padding: 0 10px;
}
.oc:after {
content: "";
display: table;
clear: both;
}
header .nav-logo {
display: block;
left: 10px;
height: 54px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
header .nav-logo {
display: block;
left: 10px;
height: 54px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
header .main-nav {
right: 10px;
position: absolute;
top: 40%;
-webkit-transform: translateY(-40%);
-moz-transform: translateY(-40%);
-ms-transform: translateY(-40%);
-o-transform: translateY(-40%);
transform: translateY(-40%);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000;
-webkit-transform: scale3d(1, 1, 1);
}
header .main-nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
header .main-nav ul li {
display: inline-block;
}
header .main-nav-item {
color: #666668;
font-weight: 200;
font-size: 21px;
margin-left: 25px;
padding: 0 0 4px 0;
position: relative;
outline: none;
transition: all 0.3s ease 0s;
}
header .main-nav-item:after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background: #89a959;
content: "";
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
}
header .main-nav ul ul {
display: none;
background: #fff;
border-top: 2px solid #73973f;
padding: 0;
position: absolute;
top: 150%;
z-index: 10000;
transition: all 0.3s ease 0s;
}
header .main-nav ul ul li {
display: block;
position: relative;
padding: 15px;
transition: all 0.3s ease 0s;
}
header .main-nav ul ul li a {
color: #666;
}
header .main-nav ul ul li:hover {
background: #eee;
}
header .main-nav ul li:hover > ul {
display: block;
}
.pitch {
background-color: #f6faf0;
padding: 40px 0;
position: relative;
text-align: center;
-webkit-transition: height 1.5s ease-in-out, padding 0.5s ease-in-out;
-moz-transition: height 1.5s ease-in-out, padding 0.5s ease-in-out;
transition: height 1.5s ease-in-out, padding 0.5s ease-in-out;
}
.pitch:after {
content: "";
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: -25px;
z-index: 2;
height: 0;
width: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 25px solid #f6faee;
}

	<header>
		<div class="oc">
			<a href="/" class="nav-logo">
				<img src="http://placehold.it/300x50"
			</a>
			<nav class="main-nav">
				<ul>
					<li><a href="#" class="main-nav-item" data-hover="About">About</a></li>
					<li><a href="#" class="main-nav-item" data-hover="Plans">Plans</a></li>
					<li>
						<a href="#" class="main-nav-item" data-hover="Contact">Contact</a>
						<ul>
							<li><a href="#" class="sub-nav-item">Request a Demo</a></li>
							<li><a href="#" class="sub-nav-item">Talk To Us</a></li>
						</ul>
					</li>
					<li><a href="#" class="main-nav-item" data-hover="Request a Demo">Request a Demo</a></li>
					<li><a href="#" class="main-nav-item" data-hover="API">API</a></li>
					<li><a href="#" class="main-nav-item-login" data-hover="Login">Login</a></li>
				</ul>
			</nav>	
		</div>
	</header>
	<div class="pitch">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec condimentum elit. Cras eget fringilla velit, id pulvinar libero. Sed venenatis, orci eu aliquet lacinia, orci eros pharetra erat, ac bibendum ex purus rhoncus erat. Sed pharetra in orci sed sollicitudin. Aliquam fringilla mollis arcu, aliquam euismod urna commodo nec. Nunc ut lorem augue. Phasellus quis nibh pretium, ultricies mauris et, tincidunt nisi. Suspendisse fermentum, libero eu pulvinar semper, massa ante tincidunt nisi, sed aliquet elit justo a purus.</p>
	</div>

Answer 1

这只是一个z指数问题。您的标题下拉菜单正在隐藏＆＃34;在.pitch内容后面。所以我更新了您的JSFiddle。

只需将position:relative;z-index:2;添加到.header，将position: relative;z-index:1;添加到.pitch。然后，您的下拉列表将覆盖.pitch。