我的wordpress设置中有一个子菜单,IE9中出现了一个问题。它显示外部阴影,但不显示菜单本身。菜单设置在display: none;
上以开始。
/* Navigation */
if(windowWidth > 800) {
var timer;
NavigationArrow();
$('#main-nav > li').hover(function(){
clearTimeout(timer);
NavigationArrow($(this));
}, function(){
timer = setTimeout(function(){
NavigationArrow();
}, 300);
});
$('#main-nav .menu-item-has-children').hover(function(){
// $(this).children('.sub-menu').stop().slideToggle(500, 'easeOutBack');
$(this).children('.sub-menu').stop().show();
});
} else {
$('#main-nav a[href=#]').click(function(e){ e.preventDefault(); });
// $('#main-nav a[href=#contact-us]').click(function(){ $('#main-nav-wrap').slideUp(600, 'easeOutBack'); });
$('#main-nav a[href=#contact-us]').click(function(){ $('#main-nav-wrap').hide(); });
$('#main-nav .menu-item-has-children').click(function(){
// $(this).children('.sub-menu').stop().slideToggle(500, 'easeOutBack');
$(this).children('.sub-menu').stop().show();
});
}
#main-nav .sub-menu {
left: 50%;
margin-left: -66px;
}
#main-nav .sub-menu {
-webkit-transition: none !important;
-khtml-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
list-style: none;
position: absolute;
top: 100%;
left: 0;
display: none;
padding: 0 10px;
margin: 0;
width: 133px;
height: auto;
text-align: center;
font-size: 14px;
-webkit-border-radius: 0 0 6px 6px;
-khtml-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
-ms-border-radius: 0 0 6px 6px;
-o-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
background: #fff;
background: rgba(255,255,255,0.95);
}
.sub-menu {
-webkit-box-shadow: 0px 0px 8px 0px rgba(50,50,50,0.25);
-moz-box-shadow: 0px 0px 8px 0px rgba(50,50,50,0.25);
box-shadow: 0px 0px 8px 0px rgba(50,50,50,0.25);
}