Make sure your existing code for the Main Menu Menu Container and the Main Menu Menu Bar CSS Classes background property are set to transparent, i.e. background: transparent;. This allows the background images/colors within the skin to show through the menu container and menu bar.

How the code should appear in your CSS file.

.MainMenu_MenuContainer
{
background: transparent;
}

.MainMenu_MenuBar
{
background: transparent;
}  

Make sure your existing Main Menu Menu Bar, Main Menu Root Menu Item, and Main Menu Root Menu Item Selected CSS Classes height properties are all the same, in other words match. Let say you want a horizontal menu height of 30px height: 30px;. Then they should all have the same height.

How the code should appear in your CSS file.

.MainMenu_MenuBar
{
height: 30px;
}

.MainMenu_RootMenuItem
{
height: 30px;
}

.MainMenu_RootMenuItemSelected
{
height: 30px;
}

Make sure your existing and/or the original default.css Main Menu Menu Item CSS Class border properties border-bottom: white 1px solid; border-top: white 1px solid; are set to '0px'. You may use the following code border-bottom: white 0px solid; border-top: white 0px solid; to hide/remove the white bottom and top borders from your menu items.

How the code should appear in your CSS file.

.MainMenu_MenuItem
{
border-bottom: white 0px solid;
border-top: white 0px solid;
}  

Make sure your existing Main Menu Menu Item, Main Menu Menu Icon, and Main Menu Sub Menu Item Selected CSS Classes padding properties are all the same, in other words match. Lets say you want to have a menu item and menu icon padding as follows, top 2px, right 5px, bottom 2px, and left 5px padding: 2px 5px 2px 5px;. Then they should all have the same padding.

How the code should appear in your CSS file.

.MainMenu_MenuItem
{
padding: 2px 5px 2px 5px;
}

.MainMenu_MenuIcon
{
padding: 2px 5px 2px 5px;
}

.MainMenu_SubMenuItemSelected
{
padding: 2px 5px 2px 5px;
}  

Make sure your existing Main Menu Menu Item, and Main Menu Sub Menu Item Selected CSS Classes font properties are the same, in other words match. Lets say you want to have the root menu item font size that is 12px, with a bold weight, an Ariel family, and dark gray color, font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #333333; /* font color */. Then the sub menu item select font properties should match the menu item font properties preventing inconsistencies on mouse hover.

How the code should appear in your CSS file.

.MainMenu_MenuItem
{
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #333333; /* font color */
}

.MainMenu_SubMenuItemSelected
{
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #333333; /* font color - for different mouse hover color, change color here */
}

Replace your existing and/or the original default.css Main Menu Menu Icon CSS Class code with the following display: none;.

How the code should appear in your CSS file.

.MainMenu_MenuIcon
{
display: none;
}  

Modify your existing and/or the original default.css Main Menu Sub Menu CSS Class background color property, i.e. background-color: #FFFFFF; with the color you want. Lets say the background color you want is blue (#0000FF). This simply means replace #FFFFFF (which is the color white) with the color blue (#0000FF) or whatever color you want.

NOTE: Make sure the Main Menu Menu Item CSS Class 'background' / 'background-color' properties are either removed or set to transparent, i.e. background: transparent;, otherwise the Main Menu Sub Menu CSS Class background-color will not show through.

How the code should appear in your CSS file.

.MainMenu_SubMenu
{
background-color: #00000FF;
}  

Modify your existing and/or the original default.css Main Menu Sub Menu CSS Class border property border-bottom: #FFFFFF 0px solid; border-left: #FFFFFF 0px solid; border-top: #FFFFFF 0px solid; border-right: #FFFFFF 0px solid; with the color, width, and style of border you want. Let say the border you want to wrap your sub menu with, is blue (#0000FF) in color, with a 2px width, and a line style that is dotted. This is the code you would use border-bottom: #0000FF 2px dotted; border-left: #0000FF 2px dotted; border-top: #0000FF 2px dotted; border-right: #0000FF 2px dotted;.

How the code should appear in your CSS file.

.MainMenu_SubMenu
{
border-bottom: #0000FF 2px dotted;
border-left: #0000FF 2px dotted;
border-top: #0000FF 2px dotted;
border-right: #0000FF 2px dotted;
}  

Even though the Main Menu Menu Break CSS Class does not seem to have an affect on the solpart menu at the moment. We recommend that you replace your existing code and/or the original default.css code with the following display: none;, just in case the CSS Class begins to display without notice. This should help in preventing it from messing up your current menus.

How the code should appear in your CSS file.

.MainMenu_MenuBreak
{
display: none;
}  

Modify your existing code and/or the original default.css Main Menu Menu Item Selected CSS Class property background-color: #C1D2EE;. Lets say you want your sub menu item's background color to be pink (#FFC0CB) on mouse hover. This simply means replace #C1D2EE (which is a light gray color) with the color pink (#FFC0CB) or whatever color you want.

How the code should appear in your CSS file.

.MainMenu_MenuItemSel
{
background-color: #FFC0CB;
}  

Replace your existing and/or the original default.css Main Menu Menu Arrow CSS Class code with the following display: none;.

How the code should appear in your CSS file.

.MainMenu_MenuArrow
{
display: none;
}  

Make sure your existing and/or the original default.css Main Menu Menu Arrow CSS Class code for the bottom and right borders are set to '0px', you may use the following code border-right: #FFFFFF 0px solid; border-bottom: #FFFFFF 0px solid;.

How the code should appear in your CSS file.

.MainMenu_MenuArrow
{
border-right: #FFFFFF 0px solid;
border-bottom: #FFFFFF 0px solid;
}  

Replace your existing and/or the original default.css Main Menu Root Menu Arrow CSS code with the following display: none;.

How the code should appear in your CSS file.

.MainMenu_RootMenuArrow
{
display: none;
}  

To help maintain simplicity within your Solpart Menu CSS Classes we recommend that you leave blank or don't use Main Menu Root Menu Item Breadcrumb or Main Menu Sub Menu Item Breadcrumb CSS Classes.

How the code should appear in your CSS file.

.MainMenu_RootMenuItemBreadcrumb
{
/* blank, refers to rootmenuitemselected */
}

.MainMenu_SubMenuItemBreadcrumb
{
/* blank, refers to submenuitemselected */
}

Make sure your existing Main Menu Root Menu Item, and Main Menu Root Menu Item Selected CSS Class padding properties are the same, in other words match. Lets say you want to have the root menu item padding as follows, top 0px, right 10px, bottom 0px, and left 10px, padding: 0px 10px 0px 10px;. Then the root menu item select padding property should match the root menu item padding property preventing inconsistencies on mouse hover.

How the code should appear in your CSS file.

.MainMenu_RootMenuItem
{
padding: 0px 10px 0px 10px;
}

.MainMenu_RootMenuItemSelected
{
padding: 0px 10px 0px 10px;
}

Make sure your existing Main Menu Root Menu Item, and Main Menu Root Menu Item Selected CSS Classes font properties are the same, in other words match. Lets say you want to have the root menu item font size that is 12px, with a bold weight, an Ariel family, and dark gray color, font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #333333; /* font color */. Then the root menu item select font properties should match the root menu item font properties preventing inconsistencies on mouse hover.

How the code should appear in your CSS file.

.MainMenu_RootMenuItem
{
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #333333; /* font color */
}

.MainMenu_RootMenuItemSelected
{
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #333333; /* font color - for different mouse hover color, change color here */
}

To help maintain simplicity within your Solpart Menu CSS Classes we recommend that you leave blank or don't use Main Menu Root Menu Item Active or Main Menu Sub Menu Item Active CSS Classes.

How the code should appear in your CSS file.

.MainMenu_RootMenuItemActive
{
/* blank, refers to rootmenuitemselected */
}

.MainMenu_SubMenuItemActive
{
/* blank, refers to submenuitemselected */
}