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

debugcn 发表于 Dev

贾瓦德·扎卡里亚（Jawwad Zakaria）

我一直在尝试向网站的标题导航中添加一个下拉菜单，但是在标题元素之外根本看不到该下拉菜单。

这是一个显示问题的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>