CSS友好适配器菜单控件在IE中不起作用

Question

I was having some rendering issues with the old-style menu control getting Chrome to look correct, so I decided to switch and use the CSS Friendly Adapters (http://cssfriendly.codeplex.com/) to get my menu control to render as a list and hopefully have some more cross-browser consistency, well that hasn't worked either!

So I have styled my menus and they now work great with Chrome, Safari and Firefox, but not IE I have a basic horizontal list loaded from a datasource, with 1-13 items in the dynamic lists attached to them. In Chrome and Firefox now, after the menu is styled the dynamic menu items are appearing properly below the static menu items. But in IE(7/8) the dynamic menu items are appearing directly to the right of the currently hovered over static menu item (and with the first dynamic item behind the static menu item to the right of the current one)

Here is a screenshot of the menu working properly in Chrome: http://i42.tinypic.com/2d3lom.png

And a screenshot of the same menu being hovered over in IE (in this case 8, but it looks the same in 7): http://i39.tinypic.com/2vmc4kn.png

Here is the rendered HTML for the menu:

<div class="AspNet-Menu-Horizontal" id="ctl00_navMenu">
    <ul class="AspNet-Menu">
        <li class="AspNet-Menu-WithChildren  AspNet-Menu-Selected">
            <a href="javascript:void(0);" class="AspNet-Menu-Link  AspNet-Menu-Selected">Home</a>
            <ul>
                <li class="AspNet-Menu-Leaf  AspNet-Menu-ParentSelected">
                    <a href="default.aspx" class="AspNet-Menu-Link  AspNet-Menu-ParentSelected">Home</a>

                </li>
            </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
            <a href="javascript:void(0);" class="AspNet-Menu-Link">
                Financial Systems</a>
            <ul>
                <li class="AspNet-Menu-Leaf">
                    <a href="fast/select_fast.aspx" class="AspNet-Menu-Link">Input Sales</a>
                                    </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="fast/select_fast_upload.aspx" class="AspNet-Menu-Link">Upload Sales</a>
                                   </li>
            </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
            <a href="javascript:void(0);" class="AspNet-Menu-Link">Reports</a>
            <ul>
                <li class="AspNet-Menu-Leaf">
                    <a href="reports/select_fast_prior.aspx" class="AspNet-Menu-Link">Prior</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="reports/select_fast_summary.aspx" class="AspNet-Menu-Link">Summary</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="reports/select_fast_by_month.aspx" class="AspNet-Menu-Link">Monthly</a>
                </li>
            </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
            <a href="javascript:void(0);" class="AspNet-Menu-Link">Administration</a>
            <ul>
                <li class="AspNet-Menu-Leaf">
                    <a href="shoptracker/ShopTracker.aspx" class="AspNet-Menu-Link">Shop Tracker</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="shoptracker/shopupload.aspx" class="AspNet-Menu-Link">Shop Upload</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/fast_weekly_comp.aspx" class="AspNet-Menu-Link">Weekly Comp Metrics</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/fast_weekly_comp_upload.aspx" class="AspNet-Menu-Link">Weekly Comp Upload</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/fast_estimates.aspx" class="AspNet-Menu-Link">Estimate Maintenance</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/UserMaintenance.aspx" class="AspNet-Menu-Link">User Maintenance</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/CorpUserMaintenance.aspx" class="AspNet-Menu-Link">Corporate Users</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/CountryISOCodeMaintenance.aspx" class="AspNet-Menu-Link">Country ISO Code Maint</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/TerritoryMaintenance.aspx" class="AspNet-Menu-Link">Territory Rollup Maint</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/ContentAdmin.aspx" class="AspNet-Menu-Link">Content Maintenance</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/systemmessage.aspx" class="AspNet-Menu-Link">Edit System Message</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/MenuBarAdminDetails.aspx" class="AspNet-Menu-Link">Menu Maintenance</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="/ChangePassword.aspx" class="AspNet-Menu-Link">Change Password</a>
                </li>
            </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
            <a href="javascript:void(0);" class="AspNet-Menu-Link">Help</a>
            <ul>
                <li class="AspNet-Menu-Leaf">
                    <a href="help.aspx" class="AspNet-Menu-Link">
                        Help Menu</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

And here is my CSS (same for IE and Chrome, but in the Chrome stylesheet I just add a gradient below this):

.AspNet-Menu li {color:#000000;line-height:20px;border:none;font-size:11px;font-weight:bold;}
.AspNet-Menu-WithChildren {width:150px;text-align:center;color:#FFFFFF;background:#940000;}
.AspNet-Menu-Selected {color:#000000;}
.AspNet-Menu-WithChildren a {color:#FFFFFF;}
.AspNet-Menu-Selected a {color:#000000;background:#FFCB0B;}
.AspNet-Menu-Leaf {background:#F0F0F0;width:150px;}
.AspNet-Menu-Leaf a {color:#000000;}
.AspNet-Menu-Leaf :hover, .AspNet-Menu-Leaf a :hover {background:#666666;color:#FFFFFF;}

Answer 1

Maybe try adding:

CSS

ul .AspNet-Menu-WithChildren ul {top:100%; float:none;}

I'm thinking that might force IE to put it where you need it to be. Not 100% sure, and wasn't able to try it on my local machine.