屏幕左侧显示的下拉菜单

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)

编辑：此父元素必须是块元素（您的 <li> 当前是内联元素），因此您还必须添加：

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

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

屏幕左侧显示的下拉菜单

Dropdown menu displayed on left of screen

css

position

menu

drop-down-menu

dropdown