下拉菜单隐藏在 header 元素之外

Question

我一直在尝试向网站的 header 导航添加下拉菜单，但下拉菜单在 header 元素之外根本不可见。

这里 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-index 问题。您的 header 下拉菜单 "hidden" 在 .pitch 内容后面。所以我更新了你的 JSFiddle.

只需将 position:relative;z-index:2; 添加到 .header 并将 position: relative;z-index:1; 添加到 .pitch。然后你的下拉菜单将覆盖 .pitch.

下拉菜单隐藏在 header 元素之外

Dropdown menu hidden outside header element

html

css

overflow