屏幕左側顯示的下拉菜單

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定位元素的父元素必須有比static以外的position值（這是默認，即使它不包含在CSS中）

編輯：這個父元素有是一個塊級元素（你<li>目前是內聯元素），所以還必須補充一點：

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

也看到更新的codepen：http://codepen.io/anon/pen/zrqyJr