绝对和相对定位

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>