z-index 在淡入淡出过渡期间不起作用，在过渡完成后解决

Question

我正在使用以下代码淡入和淡出一些列表项以创建新闻行情。

jQuery:

$(function () {
var list_slideshow = $("#ticker"),
    listItems = list_slideshow.children('li'),
    listLen = listItems.length,
    i = 0,
    changeList = function () {

        listItems.eq(i).fadeOut(600, function () {
            i += 1;
            if (i === listLen) {
                i = 0;
            }
            listItems.eq(i).fadeIn(600);
        });
    };
listItems.not(':first').hide();
setInterval(changeList, 8000);
});

CSS：

.ticker-wrap {
 background-color: #ccc;
 }

 ul#ticker {
font-size: 1.2em;
padding: .43em;
 }

 ul#ticker li {
color: #fff;
 }

这一切都很好，直到我在它上面打开一个下拉菜单，然后当前 li 列表项显示在菜单上方（不是 UL 背景），仅在淡入淡出过渡期间。转换完成后，列表项将返回到正确的 z-index，直到下一个淡入淡出开始。

我已经检查了导航上的 z-index 都设置为 z-index 9999 并且屏幕上的其他任何东西都没有问题。

有什么想法可以让这些列表项在转换时保持在导航后面？

非常感谢

更新：这是一个 jsFiddle http://jsfiddle.net/leanda/eetyv/

Answer 1

我发布解决方案：

CSS

.ticker-wrap {
    background-color: #ccc;
    position:relative;
    z-index : 1;
}

.nav-wrap{
    z-index : 2;
}

ul#ticker {
    font-size: 1.2em;
    padding: .43em;
}

ul#ticker li {
    color: #fff;
}