菜单中的绝对和相对位置

Morsus 发表于 Dev

咬伤

我们都很难定位绝对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

犯错

尝试这样的事情：

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小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。