html - 菜单中的绝对和相对定位

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 主题 :S

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