Most likely the cause is the float:left on all .mi items.  Basically, the .Menu .mi is going to format all menu items with those settings.  When I use the new classes for DNN 5, I use ".mi" alone or ".root.mi" for root items, and for submenu items I use ".m .mi", and that's what works for me.  There is most likely more than one method that can be used for particular preferences and styles.

Also, in the HTML, you did not assign the ".Menu" class in a parameter of the object.  You should have a <param name="CSSControl" value="Menu" /> in the object code to get better results.  At least that's what I got as the protocol from the instructional video by I believe Jon Henning who is the developer of this.  You can still have a different class assigned to that wrapper div that currently has the .Menu class assigned, perhaps assign a class "MenuWrapper" in the div and the "Menu" class in the object parameters.

Also, make sure the target audience for the site is not using IE6 or below or your png images won't be transparent... IE7 and IE8 support png transparency, earlier versions don't.  I see a lot of designers using png's without applying a png fix script and yes, there are some folks out there still using IE6 or earlier though the numbers are starting to dwindle down...

Below is code I've used and have excellent cross-browser results, no issues so far.  It gives complete and separate control over the styles applied to the root menu and submenu items, so you can still use a float left in the root items and not in the submenu items:

<object id="dnnNAV" codetype="dotnetnuke/server" codebase="NAV">
<param name="ProviderName" value="DNNMenuNavigationProvider" />
<param name="IndicateChildren" value="false" />
<param name="ControlOrientation" value="Horizontal" />
<param name="CSSControl" value="mainMenu" />
</object>

.mainMenu {font-family: Tahoma, Arial, Serif; cursor:  pointer; font-size: 12px; font-weight: bold; margin: 0px; padding: 0px; vertical-align: middle;}

/* root menu items default */
.mainMenu .root.mi { padding: 3px 7px 0px 7px; background: #68b8aa url('Menu_RootBlue.jpg') repeat-x scroll left top; color: #ffffff; font-weight: bold; vertical-align: middle; text-align: left; border: none 0px; float: left; clear: none; height: 19px; border-right: solid 5px #ffffff; margin: 0px 0px 5px 0px; display: block; white-space: nowrap;}

/* below sets the minimum width of the root menu items, not necessary, just a design choice for a particular skin */
.mainMenu .root.mi {min-width: 107px;}

/* sub menu */
.mainMenu .m {border: solid 3px #bebd3e; width: 150px; white-space: nowrap; background: #f3f2d7 url('MainBg.jpg') repeat scroll left top; margin-top: -3px; z-index: 1000;}

/* sub menu menu items */
.mainMenu .m .mi * {padding: 2px 3px 2px 4px; font-weight: bold; white-space: nowrap; text-align: left; vertical-align: middle; font-family: Arial, Verdana, Sans-Serif; font-size: 11px;}
.mainMenu .m .mi {height: 21px; background: Transparent url('SubmenuSep.jpg') repeat-x scroll left bottom; color: #3d8478;}
.mainMenu .m .mi.last {background: Transparent none;}

/* root menu breadcrumb and selected */
.mainMenu .root.bc,
.mainMenu .root.sel {color: #e6f3f1;}
/* submenu breadcrumb and selected */
.mainMenu .m .mi.bc,
.mainMenu .m .mi.sel {color: #bebd3e;}

/* root menu hover */
.mainMenu .hov,
.mainMenu .root.mi.hov {background: #b8d9dc url('Menu_RootHover.jpg') repeat-x scroll left top; color: #6f473f;}

/* submenu hover */
.mainMenu .m .mi.hov {background: #b8d9dc url('Menu_RootHover.jpg') repeat-x scroll left top; color: #6f473f;}

/* icon settings */
.mainMenu .mi .icn,
.mainMenu .icn span,
.mainMenu .m .mi .icn span {padding: 0px;}
.mainMenu .root .icn img {vertical-align: middle; padding: -5px 3px 3px 2px; margin-right: 3px; float: left;}
.mainMenu .m .icn img {vertical-align: middle; padding: 0px; margin: 2px 2px 4px 2px;}

Note:  I think there was an issue with flash and the submenu, and the z-index may have been moved to a ".mainMenu .m td" or something like that so the z-index was applied to the submenu td's to get proper display order...

JOHN GIESY
DotNetNuke Hosting Expert

DotNetNuke 7 Hosting $70 /year
DNN4Less.com Team DotNetNuke  

Update on the settings I use and submenu item borders.  The submenu's are setup with three <td>'s, the third always empty (it's a leftover from solpart days that needs to have the child menu indicator arrow placed back in it and out of the menu text <td> and set to display:none when it's empty).  That third empty td was nearly impossible to set a css border-bottom on it, which is why I was using a background image in the submenu items to achieve a bottom border that extended all the way across the menu item including that last empty <td>.  In toying with the settings more tonight, I finally got a true css border with no images by applying the border to ".mainMenu table.m td" and it worked!  Major break-through for me, I've tried so many different combinations and css settings applied to the table, the row, the cell, css empty-cell, etc. and just never could get that border on the last <td> to actually be visible.   You'd end up with a border that only went partially across the menu item.  So, now, with this new class cascade, background images can be used for the menu item background and have a bottom border applied.  You can avoid the border on the last menu item by using the ".last" class like ".mainMenu table.m .last td" as long as that comes after the first one that applied the border.  And all this is DNN5 only.  DNN4 is probably still impossible to apply a border all the way across the submenu items...

JOHN GIESY
DotNetNuke Hosting Expert

DotNetNuke 7 Hosting $70 /year
DNN4Less.com Team DotNetNuke