Question

我使用jQuery设计了一个下拉菜单。在一页上我添加了

position: relative  
top: -18px

对于某些div元素，它们位于被滑落的ul的顶部。当我在菜单中移动鼠标时，当我与这些元素相交时，jquery开始向上滑动菜单（似乎在移动到ul时我跳到顶部的div，所以这是正确的）。当然我不想要这样的效果。我尝试添加z-index，但没有运气。

http://jsfiddle.net/2WHVT/（我在日期标签上添加了黑色边框，这会破坏菜单）。对于颜色和设计很抱歉，我快速移动了，但重点是相同的。

也许你有一些想法？

Answer 1

您需要添加z-index才能将li置于顶端。实例：http://jsfiddle.net/tw16/2WHVT/12/

#menu ul li {
    border-right: 1px solid #820B0B;
    display: block;
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1; /*add this*/
}

Answer 2

我在z-index CSS中添加了#menu ul，它似乎可以解决问题。像这样：

#menu ul
{
    padding: 0;
    margin: 0;
    z-index: 2;  //THIS IS WHAT I ADDED 
}

见这里：http://jsfiddle.net/nayish/2WHVT/10/

Answer 3

#NewsDisplay .news .newsDate
{
    position: relative;
    top: -18px;
    display: inline-block;
    border: 1px solid black;
    height: 18px;
    width: 100%;
    text-align: right;
    color: Gray;
    z-index:-10;
}

这对我有用。如果您有问题，请告诉我。

jQuery失败与位置：相对

3 个答案: