1

我正在处理固定标题中的菜单，并且在显示方式上遇到困难。该菜单是一组 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();
});
});
4

1 回答 1

2

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

我假设您使用 z 索引错误。Z-index 用于确定元素所在的“层”。假设我们有两个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;
}

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

于 2013-07-09T18:50:41.223 回答