Question

我无法弄清楚为什么我的下拉菜单隐藏在包含菜单的div后面。我已经尝试将各种元素相对定位并将菜单z-indexing到比其包含的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-index和相对定位问题？

1 个答案: