Instead of vertical-align, try something like this:

MainMenu_MenuItem { background: #ffffff url(images/menuItem.gif) top center no-repeat }

Actually, the MainMenu_MenuItem class styles both the root and submenu items.
If you want the submenu items styled differently from the root, you need to use .MainMenu_SubMenu .MainMenu_MenuItem

Here's what I generally use:
.MainMenu_MenuItem { }  for root menu items
.MainMenu_MenuItemSel { }  for root menu items on hover or selected
.MainMenu_SubMenu { }  overall submenu style
.MainMenu_SubMenu .MainMenu_MenuItem { }  for submenu items
.SubMenuItemSelected { }  for submenu items on hover or selected

And in the .ascx file, something like this:
<td width="910" height="30" class="MainMenu_MenuContainer" style="padding-left:5px">
<dnn:SOLPARTMENU runat="server" id="dnnSOLPARTMENU" Display="Horizontal" SeparateCss="True" userootbreadcrumbarrow="true" usesubmenubreadcrumbarrow="true" usearrows="true" submenuitembreadcrumbcssclass="submenuitemselected" submenuitemactivecssclass="submenuitemselected" submenuitemselectedcssclass="submenuitemselected" rootmenuitemrighthtml="&nbsp;&nbsp;" separator=" " />
</td>

Hope this helps you figure it out.