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/

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

1 个答案: