I played around with the css that I use for the dnn5 menus, pasted it into the code endeavors skin, modified it, and believe this should work for you. It's working great for this test. I didn't implement .firstlast or .last, just .first, but you get the idea and can handle those with copy paste and edit. I also modified the images so there is a different background image for the icon and text areas, so it would allow for the potential wider than normal text or icon and still keep the layout design. Made the image for the text portion 200px wide and 60px high with transparent right corner, then the same for the image behind the icon except it has a transparent left top corner. Oh, I also did not use the unordered list rendering, it wasn't behaving well, so this is standard menu rendering with submenu in tables, I left all the menu animations intact in the ascx, just deleted the line for the rendering parameter, that was the only change in the ascx.
/* menu container css */
.mainMenu {font-family: Verdana, Arial, Helvetica, sans-serif; cursor: pointer; font-size: 13px; font-weight: bold;}
.mainMenu_bg {background: url(images/menu_bg.png) repeat-x top left; margin: 0 19px 0 7px; height: 40px;}
.mainMenu_left {background: url(images/menu_left.png) no-repeat top left;}
.mainMenu_right {background: url(images/menu_right.png) no-repeat top right;}
.mainMenu {font-family: Arial, Helvetica, Sans-Serif; cursor: pointer; font-size: 12px; font-weight: bold; margin: 0px; padding: 0px; vertical-align: middle;}
/* root menu items default */
.mainMenu .root.mi {padding: 0px; background: Transparent none; color: #ffffff; font-weight: bold; vertical-align: middle; text-align: center; border: none 0px; line-height: 40px; height: 40px; margin: 0px 0px 0px 0px; display: inline-block; float: left;}
.mainMenu .txt {padding: 0px 10px 0px 7px;}
/* root menu breadcrumb and selected */
.mainMenu .root.bc,
.mainMenu .root.sel {background: Transparent url('images/menu_hov.png') repeat-x scroll left top; color: #ffffff;}
/* root menu hover */
.mainMenu .hov,
.mainMenu .root.mi.hov {background: Transparent url('images/menu_hov.png') repeat-x scroll left top; color: #ffffff;}
.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: 2px; margin: 0px;}
/* sub menu */
.mainMenu .m {border: none 0px; white-space: nowrap; background: Transparent none; margin: 0px 0px 0px 0px; padding: 0px; z-index: 1000;}
.mainMenu .m .mi {height: 26px; background: Transparent none; color: #ffffff;}
.mainMenu .m .icn {width: 5px; background: #000000 none; height: 26px; line-height: 26px; display: block; margin: 0px; padding: 0px; border: 0px;}
.mainMenu .m .txt {width: 160px; background: #000000 none; padding: 0px 4px 0px 4px; height: 26px; line-height: 26px; white-space: nowrap; display: block; margin: 0px; border: 0px;}
.mainMenu .m .bc .icn,
.mainMenu .m .hov .icn {background: #ff3300 none;}
.mainMenu .m .bc .txt,
.mainMenu .m .hov .txt {background: #ff3300 none;}
.mainMenu .m .first .icn {background: Transparent url('images/submenu_top_icn.png') no-repeat scroll left top;}
.mainMenu .m .first .txt {background: Transparent url('images/submenu_top_txt.png') no-repeat scroll right top;}
.mainMenu .m .first.bc .icn,
.mainMenu .m .first.hov .icn {background: Transparent url('images/submenu_top_icn_hov.png') no-repeat scroll left top;}
.mainMenu .m .first.bc .txt,
.mainMenu .m .first.hov .txt {background: Transparent url('images/submenu_top_txt_hov.png') no-repeat scroll right top;}
Note: looking at this again, the display block is necessary for the background image to render correctly on these classes, but it also prevents the menu from expanding seemlessly if a page were to have a title longer than the set width. But, as long as you don't let page titles get out of hand this should work fine.