z索引和下拉菜單上的相對位置有問題嗎？

Question

我不太清楚為什么我的下拉菜單隱藏在包含菜單的div后面。 我試過將各種元素相對放置，並將菜單的z索引設置為比其包含的div高的值，但是我運氣不高。

我的JS小提琴鏈接在這里：

用於演示的代碼在這里：

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
  <title>Header 1</title>
</head>
<body>
  <header id="header">
    <div id="action-bar">
      <div class="container">
        <div>
          <p class="ab-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <ul class="ab-ul top-bar-links">
            <li>We Can Help</li>
            <li>Something Random</li>
            <li>More Random</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="main-header">
      <div class="container">
        <div>
          <img class="logo" src="logo.png">
        </div>
        <div class="main-nav">


          <nav id="primary_nav_wrap">
          <ul>
            <li class="current-menu-item"><a href="#">Home</a></li>
            <li><a href="#">Menu 1</a>
              <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a>
                  <ul>
                    <li><a href="#">Deep Menu 1</a>
                      <ul>
                        <li><a href="#">Sub Deep 1</a></li>
                        <li><a href="#">Sub Deep 2</a></li>
                        <li><a href="#">Sub Deep 3</a></li>
                          <li><a href="#">Sub Deep 4</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Deep Menu 2</a></li>
                  </ul>
                </li>
                <li><a href="#">Sub Menu 5</a></li>
              </ul>
            </li>
            <li><a href="#">Menu 2</a>
              <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
              </ul>
            </li>
            <li><a href="#">Menu 3</a>
              <ul>
                <li class="dir"><a href="#">Sub Menu 1</a></li>
                <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
                  <ul>
                    <li><a href="#">Category 1</a></li>
                    <li><a href="#">Category 2</a></li>
                    <li><a href="#">Category 3</a></li>
                    <li><a href="#">Category 4</a></li>
                    <li><a href="#">Category 5</a></li>
                  </ul>
                </li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                <li><a href="#">Sub Menu 5</a></li>
              </ul>
            </li>
          </ul>
          </nav>


        </div>
      </div>
    </div>
  </header>
  <img src="gentleman.jpg" />
</body>
</html>

CSS：

body{
  margin:0;
}
p{
  font-family: 'Abel', sans-serif;
  -webkit-margin-before: 2px;
  -webkit-margin-after: 2px;
}
a{
  font-family: 'Abel', sans-serif;
}
li{
  font-family: 'Abel', sans-serif;
}
ul{
  list-style: none outside;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
}
ul li{
  color:white;
  display: inline-block;
  margin-right: 6px;
  padding-right: 6px;
  border-right: 1px solid rgba(255,255,255,.1);
}
#header{
  position: relative;
}
#action-bar{
  left: 0;
  top: 0;
  width: 100%;
  z-index: 30;
  background: #242b33;
  height:45px;
}
.container{
  max-width: 1220px;
  margin:0 auto;
  position:relative;
  overflow: hidden;
}
.ab-p{
  color:#fff;
  float:left;
  padding:10px;
}
.top-bar-links{
  float: right;
  padding:10px;
}
.main-header{
  position: static;
  width: 100%;
  background-color: #0c141d;
  display:block;
  overflow:auto;
}
.logo{
  float: left;
  width:300px;
  height:auto;
}
.main-nav{
  float:right;
}

#primary_nav_wrap ul
{
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  z-index: 201;
}

#primary_nav_wrap ul a
{
    display:block;
    color:#333;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#ddd
}

#primary_nav_wrap ul li:hover
{
    background:#f6f6f6
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:200px
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}

任何幫助表示贊賞。

Answer 1

.container已將溢出設置為隱藏，這似乎是罪魁禍首。

您給了兩個具有溢出屬性的元素。

.container和#header，消除溢出並將以下CSS添加到main-header中

min-height:200px; // depending on what you want the height to be.

這是密碼筆鏈接： http : //codepen.io/saa93/pen/qqdRZy

z索引和下拉菜單上的相對位置有問題嗎？

問題描述

1 個解決方案

解決方案1
1 已采納 2016-11-07 23:13:38

z索引和下拉菜單上的相對位置有問題嗎？

問題描述

1 個解決方案

解決方案1 1 已采納 2016-11-07 23:13:38

解決方案1
1 已采納 2016-11-07 23:13:38