菜单中的绝对和相对定位

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;
}

这里重要的一点是确保＆＃39; page_item_has_children＆＃39;元素是相对定位的，而且孩子的情况相对较小。绝对定位。

JS Fiddle

Answer 2

<强>更新

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;