jquery / css下拉菜单并将其下方的div推向onhover

Question

我尝试在下拉菜单中使用jquery幻灯片效果（ala本教程：http://www.tuttoaster.com/jquery-dropdown-menu-in-wordpress/4/ - 这似乎是一种非常常见的方法来使jquery下拉）但每当我将鼠标悬停在列表项上时，子菜单推下它下面的div（我的主要内容）。我怎样才能解决这个问题？我想避免绝对定位内容div。谢谢！

Answer 1

您有两种选择：

使用绝对定位

将您正在滑动的元素放在绝对位置会将其从父容器在确定其高度时执行的计算中删除

绝对与相对定位演示：http://jsfiddle.net/marcuswhybrow/E8twW/1/

给容器一个固定的高度

通过为父容器提供固定高度，它不再使用其相对定位的子元素的高度来计算其高度。

使用绝对和相对演示修正了高度：http://jsfiddle.net/marcuswhybrow/YtGLp/1/

Answer 2

嗯，既然你没有完全提供任何代码，我无法真正看出问题所在。但是您可以使用相对于父级的绝对坐标来定位元素。嗯，这很难解释，所以我只提供一些小代码

CSS：

.parent {
   position: relative;
}

.menu {
   position: absolute;
   bottom: 0px;
   left: 0px;
} 

HTML：

<div class="parent">
   <ul class="menu">
      <li>Menu Item</li>
   </ul>
</div

在这种情况下，UL将被定位为绝对但相对于其父级。因此元素将位于父DIV的左下角。这也是实现CSS下拉菜单的方式。