菜單使用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;
}

那將得到相同的結果-水平放置的元素。 除了看起來不太笨拙。