Javascript jQuery选择器在下拉菜单中工作不正常

我做了一个下拉菜单，但它不能正常工作。请参阅fiddle或代码：

$（文档）.ready（函数（）{
$（函数（）{
$（“.links>li>a:not（.sub-menu a）”）.mouseenter（函数（）{
$（“.sub menu bg”）.addClass（“menu bg up”）；
setTimeout（函数（）{
$（“.sub-menu”）.fadeIn（）；
}, 700);
});
$（“.sub-menu bg”）.mouseleave（函数（）{
$（“.sub-menu”）.fadeOut（）；
setTimeout（函数（）{
$（“.sub menu bg”）.removeClass（“menu bg up”）；
}, 500);
});
}());
});
#包装器{
高度：300px；
}
页脚{
背景：白色；
颜色：#8a8a8a；
字体系列：TWCENMTREAL；
字号：1em；
文本转换：大写；
填充：1VH0；
位置：相对位置；
z指数：9100；
宽度：100%；
}
页脚链接{
文本对齐：居中；
列表样式：无；
}
footer.links>li{
浮动：左；
宽度：24%；
位置：相对位置；
}
footer.links li:：after{
内容：“|”；
浮动：对；
}
footer.links li:last child:：after{
内容：''；
}
页脚.链接LiA{
颜色：#8a8a8a；
}
页脚链接li:hover>a{
颜色：#9ebe2d；
}
页脚.链接li:悬停.子菜单li:第一个子菜单a{
颜色：#9ebe2d；
}
页脚子菜单{
位置：绝对位置；
底部：100%；
左：首字母；
填充：0px0；
边距：0！重要；
字体系列：TWCENMTREAL；
字号：1em；
宽度：100%；
高度：150像素；
显示：无；
}
页脚.子菜单li{
文本对齐：居中；
}
页脚。子菜单li：第一个子菜单{
字体系列：棱柱规则；
填充：0 10px 0；
}
footer.子菜单li:：after{
内容：''；
保证金：0；
}
页脚.子菜单LIA{
颜色：#8a8a8a；
}
页脚。子菜单li a：悬停{
颜色：#9ebe2d；
}
页脚。子菜单背景{
背景：rgba（255，255，255，0.8）；
位置：绝对位置；
底部：100%；
左：首字母；
z指数：-5；
宽度：100%；
显示：块；
过渡：0.7s；
-webkit转换：0.7s；
-moz跃迁：0.7s；
-o-转变：0.7s；
-ms转换：0.7s；
身高：0；
}
.菜单背景{
高度：165px！重要；
}































您可以在CSS中完成这一切。我在下面举了一个例子



.links{
位置：相对位置；
宽度：24%；
}
.links>a：：之后{
内容：“|”；
浮动：对；
}
.子菜单{
可见性：隐藏；
/*隐藏子菜单*/
不透明度：0；
位置：绝对位置；
顶部：-172px；
左：0；
宽度：100%；
变换：translateY（2em）；
z指数：-1；
过渡：所有0.3缓进0缓出0，可见性0线性0.3，z指数0线性0.01；
}
.链接：悬停.子菜单{
能见度：可见；
/*显示子菜单*/
不透明度：1；
z指数：1；
转化：translateY（0%）；
转换延迟：0s、0s、0.3s；
/*这将删除转换延迟，以便在其他样式转换时可以看到菜单*/
}
/*表象的*/
身体{
填充：2%；
字体：18px/1.4无衬线；
}
页脚{
位置：相对位置；
顶部：200px；
}
页脚a{
颜色：#8a8a8a；
显示：块；
填充：0.5em0px；
文字装饰：无；
}
页脚a：悬停{
颜色：#9ebe2d；
}
页脚ul，
页脚ulli{
列表样式类型：无；
填充：0；
保证金：0；
}
页脚>ul{
背景：白色；
文本对齐：居中；
}
页脚>ul>li{
显示：内联块；
}
页脚>ul>li:第一个孩子{
左边界：无；
}
.子菜单{
背景：白色；
}































嘿，很抱歉我的反应。。这个例子很好，看起来不错，但是我看不到背景，动画也不一样。