Html CSS弹出菜单在IE9中被其容器的边框切断

我有一个弹出式菜单（当然）在FF/Chrome中看起来很棒，但在IE中，它令人窒息。我有一个关于JS Fiddle的完整示例：

如果将鼠标悬停在第二个2个菜单项上，则应该有一个弹出式菜单。然而，在IE中，它似乎被#primaryMenu容器的边界切断了

如果JSFIDLE不可用，下面是我的代码：

HTML

还有一点JS，它添加了一个悬停类

$('#primaryMenu>ul>li').hover(function(){
    if($(this).hasClass('active')){}else
    {
        $(this).addClass('hovered')
    }
},
function(){
    $(this).removeClass('hovered')
});

#primarymenu

有一个

z-index

值集，这导致了IE9中的问题

#primary menu

有一个

z-index

值集，导致IE9出现问题

---

这似乎成功了。真不敢相信我错过了。@aaron如果这对你有帮助，请随意@saluce我在这里发布了一个非常类似的问题：但在我的情况下，我需要保留z索引。有什么想法吗？谢谢，这似乎成功了。真不敢相信我错过了。@aaron如果这对你有帮助，请随意@saluce我在这里发布了一个非常类似的问题：但在我的情况下，我需要保留z索引。有什么想法吗？谢谢，DKwow，那个CSS伤了我的眼睛。哇，那个CSS伤了我的眼睛。

#primaryMenu{display:block;position:fixed;left:0px;top:132px;z-index:90;padding:40px 0 0;margin:0;width:200px}
#primaryMenu ul{padding:0;margin:0;list-style-type:none}
#primaryMenu li{padding:0;margin:0;position:relative}
#primaryMenu a{font-size:0.95em}

#primaryMenu>ul{border-bottom:1px solid #aaa;position:relative}
#primaryMenu>ul>li{border-bottom:1px solid #fff;border-top:1px solid #aaa}
#primaryMenu>ul>li>a{color:#333;text-shadow:-1px 1px 0 #fff;display:block;height:32px}
#primaryMenu>ul>li.active>a{display:block}
#primaryMenu>ul>li>a>span{display:block;padding:5px 10px 5px 30px;line-height:normal;background:url(../img/cog.png) no-repeat 10px 9px;color:#666;text-shadow:-1px 1px 0 #fff}
#primaryMenu>ul>li.hovered>a>span{color:#fff;text-shadow:-1px 1px 0 #666}
#primaryMenu>ul>li.active>a>span{color:#fff;text-shadow:-1px 1px 0 #666}

#primaryMenu>ul>li>.arrow{top:-1000em}
#primaryMenu>ul>li.active>.arrow,
#primaryMenu>ul>li.hovered>a+.arrow{position:absolute;right:1px;top:0px;z-index:5}
#primaryMenu>ul>li.active>.arrow>div,
#primaryMenu>ul>li.hovered>a+.arrow>div{position: absolute;top: 0px;left: 0px;width: 14px;height: 32px;-webkit-border-top-right-radius: 20px;-webkit-border-bottom-right-radius: 20px;-moz-border-radius-topright: 20px;-moz-border-radius-bottomright: 20px;border-top-right-radius: 20px;border-bottom-right-radius: 20px}

#primaryMenu>ul>li>ul{display:none}
#primaryMenu>ul>li>ul>li>a,
#primaryMenu>ul>li>ul>li>ul>li>a{display:block;font-size:0.9em;padding:1px 10px;color:#444}
#primaryMenu>ul>li>ul>li>a:hover{color: #06e;}
#primaryMenu>ul>li.active>ul{display:block}

#primaryMenu>ul>li.hovered{}
#primaryMenu>ul>li.hovered>ul{display:block; position:absolute;width:140px;background:#fff;top:-1px;right:-141px;border-right:1px solid #aaa;border-bottom:1px solid #aaa;border-top:1px solid #aaa;z-index:1}
#primaryMenu>ul>li.hovered>ul>li>a{padding-left:20px}
#primaryMenu>ul>li.hovered>ul>li>a:hover,
#primaryMenu>ul>li>ul>li>ul>li>a:hover{background:#f0f6fd}

#primaryMenu>ul>li>ul>li>ul>li>a{padding-left:40px;font-size:0.8em;font-style:italic}

$('#primaryMenu>ul>li').hover(function(){
    if($(this).hasClass('active')){}else
    {
        $(this).addClass('hovered')
    }
},
function(){
    $(this).removeClass('hovered')
});