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