html - CSS Flyout 菜单在 IE9 中被其容器的边框截断

Question

我有一个弹出菜单，(当然)在 FF/Chrome 中看起来很棒，但在 IE 中，它令人窒息。我在 JS Fiddle 上有一个完整的例子:http://jsfiddle.net/JXw3S/4/

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

如果 JSFiddle 不可用，这是我的代码:

HTML

<menu id="primaryMenu">
    <ul>
        <li class="active"><a href="#"><span>FMS</span></a><div class="arrow"><div></div></div>
            <ul>
                <li><a href="#">Project Accounts</a></li>
                <li><a href="#">Non-Project Accounts</a></li>
                <li><a href="#">DocID Log</a></li>
                <li><a href="#">Gift Card Tracking</a></li>
                <li><a href="#">PO/Account Reference</a></li>
                <li><a href="#">Speedkey Reference</a></li>
            </ul>
        </li>
        <li><a href="#"><span>Personel</span></a><div class="arrow"><div></div></div>
            <ul>
                <li><a href="#">Payroll</a>
                    <ul>
                        <li><a href="#">Report</a></li>
                        <li><a href="#">Analysis</a></li>
                    </ul>
                </li>
                <li><a href="#">Manage</a></li>
                <li><a href="#">PI/Project Effort</a></li>
            </ul>
        </li>
        <li><a href="#"><span>Facilities</span></a><div class="arrow"><div></div></div>
            <ul>
                <li><a href="#">Manage</a></li>
            </ul>
        </li>
    </ul>
    <a href="#" id="primaryMenuCollapse"><span>Collapse Menu</span></a>
</menu>

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}

以及添加悬停类的 JS 部分

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

Answer 1

#primarymenu 有一个 z-index 值集，这导致了 IE9 中的问题。

http://jsfiddle.net/JXw3S/5/