CSS Flyout menu gets cut off by borders of its con

2019-07-23 16:09发布

问题:

I have a flyout menu that (of course) looks great in FF/Chrome, but in IE, it's choking. I have a complete example up on JS Fiddle: http://jsfiddle.net/JXw3S/4/

If you hover over the second 2 menu items, there should be a flyout menu there. However, in IE, it seems as though its getting cut off by the borders of the #primaryMenu container.

In case JSFiddle is unavailable, here is my code:

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}

And the bit of JS that adds a hovered class

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

回答1:

#primarymenu has a z-index value set, which is causing the problem in IE9.

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