Question

我正在处理固定标题中的菜单，并且显示方式有困难。菜单是一组4个主要链接，点击后会弹出另一个包含更多链接的div。弹出div设置为覆盖初始主链接并在其下方下拉 - 类似于www.huffingtonpost.com的水平导航菜单。

我遇到的问题是下拉菜单的.png背景图片覆盖了用户点击的初始主链接。例如，如果用户点击＆＃34;研究工具＆＃34;由此产生的弹出式菜单背景涵盖了研究工具＆＃34;链接，使用户无法看到他们当前的菜单。

这也会导致用户尝试点击其他主要导航链接时遇到一些问题，例如从使用＆＃34;研究工具＆＃34;菜单处于活动状态并尝试单击＆＃34;指令资源＆＃34;链接 - 背景图像覆盖该链接的一部分，使其几乎不可点击。有没有办法让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-index用于确定元素所在的“层”。假设我们有两个absolute或fixed个定位元素z-index:1和z-index:2。 z-index:1的{{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;
}

这将得到相同的结果 - 水平定位的元素。除了它看起来不那么笨拙。

菜单的JS和z-index有困难

1 个答案: