jquery/css下拉菜单，并将其下方的div按下悬停

Question

我尝试在下拉菜单中使用jquery幻灯片效果(正如本教程所示：http://www.tuttoaster.com/jquery-dropdown-menu-in-wordpress/4/ --这似乎是制作jquery下拉菜单的一种非常常见的方法)，但是每当我将鼠标悬停在列表项上时，子菜单就会向下推入它下面的div (我的主要内容)。我该如何解决这个问题呢？我想避免绝对地定位content 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下拉菜单的实现方式。