菜单中的绝对和相对定位 [英] Absolute and relative positioning in menu

问题描述

我们都很难定位绝对div：S
在我的情况下，它的水平子菜单与这个CSS：

  ul.children {
 display：none; 
位置：绝对; 
} 
 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>关于< / a> 
< ul class ='children'> 
< li class =page_item page-item-39> 
< a href =url>关于< / a>< / li> 
< li class =page_item page-item-41> 
< a href =url>与我们联系< / a>< / li> 
< / ul> 
< / li> 
  

我无法更改HTML，因为它的WordPress主题：S

  ul {
 list-style-type：none; 
 padding：0; 
} 
 
 .page_item_has_children {
 position：relative; 
} 
 
 ul.children {
 display：none; 
位置：绝对; 
 top：100％; 
剩下：0; 
 padding：0; 
 min-width：200px; / *或任何有意义的* / 
} 
 
 ul.children li {
 height：60px; 
} 
 
 .page_item_has_children：hover> ul.children {
 display：block; 
} 
  

这里的重要内容是确保'page_item_has_children'元素相对定位而且孩子'ul'是绝对定位的。

JS小提琴

We all have hard times with positioning absolute divs :S In my case its horizontal sub-menus with this 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;
}

As you can see on the picture whole submenu moves to the left for 50% of the parents width... I tried everything and created just a bigger mess xD

So if anyone can help me out with this I will be very thankful :)

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>

I can't change html cause its wordpress theme :S

解决方案

Try something like this:

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

The important piece here is to make sure the 'page_item_has_children' element is relatively positioned and that the child 'ul' is absolutely positioned.

JS Fiddle

这篇关于菜单中的绝对和相对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！