Javascript jQuery 2级悬停导航和鼠标悬停/鼠标悬停

下面是一个工作示例：

我有2个

UL

s，每个都用

LI

s填充。当我将鼠标悬停在

.nav dayselector ul li a

上时，jQuery被用来在第二个

ul

中显示相应的

#悬停天数ul li

（这是必要的，因为实际代码是在启用了

溢出：隐藏
的旋转木马中使用的，所以我们需要使用两个单独的
ul
，并以这种方式显示它们

这很好-问题是当您将鼠标悬停在弹出的
span
（
#hover days ul li span
）上时，
#hover days ul li
会消失。（请参阅）

我需要在鼠标悬停在span上时停止此
淡出
，以便您可以使用菜单并从
：悬停span
中选择项目

但是，使用2个独立的
UL
s进行此操作的任何其他方法都是非常好的。JSFIDLE上的任何简单修复都可以吗？
如果保留对元素的引用，则可以
告诉它停在上空时停止淡出
但这需要用户在到达之前使用鼠标指针
它褪色了

  $(".nav-dayselector ul li a").each(function() {
    IndexLI = $(this).parent().index();
    var ele = $("#hover-days ul li:eq("+IndexLI+") span");

    $(this).hover(function() {
     ele.show();
    }, function() {
     ele.fadeOut();
    });

    ele.hover(function() {
     $(ele).stop().fadeIn();
    }, function() {
     $(ele).fadeOut();
    });
  });

html/css文件似乎在我的浏览器btw中工作（IE 8）