絕對和相對定位

Question

我們都與定位絕對div的困難時期：S 在我的情況下，其水平方向的子菜單，這個CSS：

ul.children{ 
display:none; 
position:absolute; 
} 
ul.children li{ 
position:relative; 
height:60px; 
float:none; 
} 
li.page_item_has_children:hover > ul.children{ 
display:inline; 
} 

正如你可以看到圖片整個子菜單移動到父母寬度的50％左邊... 我嘗試了一切，創造了一個更大的混亂xD

因此，如果任何人都可以幫助我，我會非常感激： ）

HTML：

<li class="page_item page-item-2 page_item_has_children"> 
    <a href="url">About</a> 
    <ul class='children'> 
     <li class="page_item page-item-39"> 
      <a href="url">About</a></li> 
     <li class="page_item page-item-41"> 
      <a href="url">Contact us</a></li> 
    </ul> 
</li> 

我不能改變HTML導致其wordpress主題：■

Answer 1

嘗試是這樣的：

ul { 
    list-style-type: none; 
    padding: 0; 
} 

.page_item_has_children { 
    position: relative; 
} 

ul.children { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    padding: 0; 
    min-width: 200px; /* or whatever makes sense */ 
} 

ul.children li { 
    height: 60px; 
} 

.page_item_has_children:hover > ul.children { 
    display: block; 
} 

這裏重要的一塊是確保'page_item_has_children'元素相對定位，而'ul'兒童絕對定位。

JS Fiddle

Answer 2

更新

ul.children { 
 
    display: none; 
 
} 
 

 
ul.children li { 
 
    position: relative; 
 
    height: 60px; 
 
    float: none; 
 
} 
 

 
li.page_item_has_children:hover > ul.children { 
 
    display: inline; 
 
} 
 

 
li { 
 
    float: left; 
 
    list-style-type: none; 
 
    width: 5em; 
 
}

<ul> 
 
    <li class="page_item page-item-2 page_item_has_children"> 
 
    <a href="url">About</a> 
 
    <ul class='children'> 
 
     <li class="page_item page-item-39"> 
 
     <a href="url">About</a></li> 
 
     <li class="page_item page-item-41"> 
 
     <a href="url">Contact us</a></li> 
 
    </ul> 
 
    </li> 
 
    
 
    <li class="page_item page-item-2 page_item_has_children"> 
 
    <a href="url">More info</a> 
 
    <ul class='children'> 
 
     <li class="page_item page-item-39"> 
 
     <a href="url">Item 1</a></li> 
 
     <li class="page_item page-item-41"> 
 
     <a href="url">Item 2</a></li> 
 
     <li class="page_item page-item-41"> 
 
     <a href="url">Item 3</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>