css - 屏幕左侧显示下拉菜单

Question

我一直在尝试下拉菜单。现在我的菜单看起来完全像我想要的那样，但我的下拉菜单显示在屏幕左侧，而不是直接在其父项下方。

示例:

.nav {
  background-color: rgba(0, 0, 0, .8);
  height: 56px;
  line-height: 56px;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1000;
}
ul {
  text-align: center;
  margin: 0;
  padding: 0;
  transition: .2s ease-in-out;
}
ul li {
  display: inline;
  transition: .2s ease-in-out;
}
ul li a {
  background-color: red;
  display: inline-block;
  padding: 0 16px;
}
ul li ul {
  text-align: left;
  opacity: 0;
  position: absolute;
  visibility: hidden;
}
ul li:hover ul {
  opacity: 1;
  visibility: visible;
}
ul li ul li {
  color: rgba(0, 0, 0, .8);
  display: block;
}

<div class="nav">
  <ul>
    <li><a href="">Home</a>
    </li>
    <li><a href="">Page1</a>
      <ul>
        <li><a href="">Page 1.1</a>
        </li>
        <li><a href="">Page 1.2</a>
        </li>
        <li><a href="">Page 1.3</a>
        </li>
        <li><a href="">Page 1.4</a>
        </li>
      </ul>
    </li>
    <li><a href="">Page2</a>
      <ul>
        <li><a href="">Page 2.1</a>
        </li>
        <li><a href="">Page 2.2</a>
        </li>
      </ul>
    </li>
    <li><a href="">About</a>
    </li>
  </ul>
</div>

悬停时，ul li ul 应该在 ul li 下可见，但 ul li ul 显示在屏幕左侧。我已经尝试了所有元素的不同位置，但我无法弄清楚。

预期结果:

Answer 1

只需将其添加到您的 CSS 中即可:

ul li {
  position: relative; 
}

absolute 的父元素定位元素必须有 position static 以外的值(这是默认值，即使它没有包含在 CSS 中)

编辑:此父元素必须是 block 元素(您的 <li> 当前是内联元素)，因此您还必须添加:

ul li {
      position: relative; 
      display: inline-block;
    }

另请参阅更新的代码笔:http://codepen.io/anon/pen/zrqyJr