菜单使用JS和z-index有困难

Question

我正在使用固定标题的菜单，但菜单显示方式有困难。 菜单是4个主要链接的集合，单击该链接将弹出另一个包含更多链接的div。 弹出的div设置为覆盖初始主链接，并将其下拉至其下-与www.huffingtonpost.com的水平导航菜单类似。

我遇到的问题是下拉菜单的.png背景图像覆盖了用户单击的初始主链接。 例如，如果用户单击“研究工具”，则弹出的菜单背景将覆盖“研究工具”链接，从而使用户无法查看他们当前所在的菜单。

用户尝试点击另一个主导航链接也会引起一些问题，例如，从激活“研究工具”菜单到尝试单击“指令资源”链接，例如背景图片覆盖了该链接的一部分，使其几乎不可点击。 有没有办法让4个主要的导航链接停留在弹出菜单div的顶部？

这是我遇到的问题的图片： http : //imgur.com/BlN0jbz

我曾尝试弄乱z-index，但似乎无济于事。 我在小提琴http://jsfiddle.net/gevBe/中附加了重要的代码片段，如果需要更多详细信息，请告诉我。 这是小提琴中包含的javascript部分：

$(document).ready(function () {
$('#toggleLink').on("click", function () {
    $('#showme1').slideToggle(600);
    $('#showme2,#showme3,#showme4').hide(400);
});

$('#toggleLink2').on("click", function () {
    $('#showme2').slideToggle(600);
    $('#showme1,#showme3,#showme4').hide(400);

});

$('#toggleLink3').on("click", function () {
    $('#showme3').slideToggle(600);
    $('#showme1,#showme2,#showme4').hide(400);
});

$('#toggleLink4').on("click", function () {
    $('#showme4').slideToggle(600);
    $('#showme1,#showme2,#showme3').hide(400);
});

$('#toggleLink,#toggleLink2,#toggleLink3,#toggleLink4').on("click", function () {
    $('#cover').show();
});
$('#cover,.button1,.button2,.button3,.button4').click(function () {
    $('#showme1,#showme2,#showme3,#showme4').hide(400);
    $('#cover').hide();
});
});

Answer 1

我编辑了您的jsfiddle。 检查#showme2 。 只是增加了它的top 。

我认为您使用的z索引错误。 Z索引用于确定元素位于哪个“层”上。 假设我们有两个absolute或fixed位置的元素，分别具有z-index:1和z-index:2 。 具有z-index:1那个将显示在具有z-index:2那个之上。

如果您的下拉框包含初始链接，则应进行设置，使其显示在初始链接下方。 您可以通过使用top

#yourbox{
top:10px;
}

上面的代码将id为yourbox的元素推离顶部10px。

附带一提，使用表格制作导航菜单有点尴尬。 我建议你用这种结构

<ul>
<li>Link one</li>
<li>Link two</li>
</ul>

ul li {
display:inline;
}

那将得到相同的结果-水平放置的元素。 除了看起来不太笨拙。