.MainMenu_MenuItem - Description

This default style class is used by DotNetNuke to style the main menu items of the main menu for the root menu items, which sit inside the menu container that holds your entire main menu structure within it, hence the name 'Main Menu, Menu Item'.

The original code from default.css file is cursor: pointer; color: black; font-family: Tahoma, Arial, Helvetica; font-size: 9pt; font-weight: bold; font-style: normal; border-left: white 0px solid; border-bottom: white 1px solid; border-top: white 1px solid; border-right: white 0px solid; background-color: transparent;. These properties of the .MainMenu_MenuItem CSS Class have specific functions, which we will now breakdown for you.

.MainMenu_MenuItem - CSS Property Functions

Below you can view the original .MainMenu_MenuItem CSS code as it appears in the default.css file and an image of the DNN_Gray, Horizontal Menu - Fixed Width Skin using the Solpart Menu.
 

The DNN_Gray, Horizontal Menu - Fixed Width Skin modified with a Solpart Menu using the default.css code display.

Live Demo

With exceptions of the 'light gray' (#EEEEEE) borders and background-colors, and the 'white' (#FFFFFF) borders and background-colors being changed to the color 'gray' (#CCCCCC) to bring about a more seemless menu presentation.

.MainMenu_MenuItem - Example

To help us understand the DonNetNuke CSS Class .MainMenu_MenuItem better and the part of the menu that is affected. We will replace the existing default.css code cursor: pointer; color: black; font-family: Tahoma, Arial, Helvetica; font-size: 9pt; font-weight: bold; font-style: normal; border-left: white 0px solid; border-bottom: white 1px solid; border-top: white 1px solid; border-right: white 0px solid; background-color: Transparent; currently in our skin.css file with cursor: pointer; color: purple; font-family: Tahoma, Arial, Helvetica; font-size: 9pt; font-weight: normal; font-style: italic; border-left: yellow 4px solid; border-bottom: yellow 4px solid; border-top: red 4px solid; border-right: red 4px solid; background-color: Transparent;. This demonstration code will change the font-color from 'black' to 'purple', the font-weight from 'bold' to 'normal', the font-style from 'normal' to 'italic', the left and bottom borders color from 'gray (#CCCCCC)' to 'yellow' and their respective border weight from '1px' to '4px', the top and right borders color from 'gray' to 'red' and their respective border weight from '1px' to '4px,' and background-color from 'grey' to 'pink'.

Below you can view the demonstration .MainMenu_MenuItem CSS code as it appears in the skin.css file used in the DNN_Gray Skin and images demonstrating what the demonstration code does to the Solpart Menu. Click on the images to view a live interactive demonstration of the CSS code in action with your own eyes.
 

The .MainMenu_MenuItem skin.css demonstration code display.

Live Demo

This image shows you the .MainMenu_Menuitem CSS class demonstration code being used in the skin.css file, for the DNN_Gray Fixed Width Skin, modified to use a Solpart Menu. 

The .MainMenu_MenuItem multiple CSS classes skin.css demonstration code display.

Live Demo

This image has the demonstration code for .MainMenu_MenuContainer and .MainMenu_MenuBar CSS Classes active keeping a blue border with an orange background for the Menu Container and a height of 30px for the Menu Bar, along with the .MainMenu_MenuItem CSS Class with red and yellow border and a pink background for the Menu Items. This helps to demonstrate the continuous change that is slowly taking place to the Main Menu.

.MainMenu_MenuItem - Tips & Tricks

Learn about the most common practices used in the DotNetNuke Solpart Menu Main Menu Menu Item CSS Class. Click on the tips & tricks below to find out more or view all our Solpart Menu CSS Classes Tips & Tricks in one place.

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 */
}

.MainMenu_MenuItem - Suggestions

Learn about the most common practices used in the DotNetNuke Solpart Menu, Main Menu, Menu Item CSS Class. Click on the Suggestions below to find out more.

Horizontal and Vertical Solpart Menu Property Suggestions - For the Default .MainMenu_MenuItem CSS Class.

Due to various web browsers and their limitations we recommend that you keep your DotNetNuke Horizontal and Vertical Solpart Menu, Main Menu, Menu Item CSS Class Properties simple., i.e. color: #000000; font-size: 12px; font-weight: bold; font-family: Ariel, Helvetica, sans-serif; padding: 2px 5px 2px 5px; border-width: 0px 0px; border: 0px #FFFFFF solid; vertical-align: middle;. This tells the browser to set the font color black, set the font size as 12px, set the font weight to bold, set the,font family to be Arial, pad the text (font) top and bottom with 2px and the right and left with 5px, hide the borders by resetting the default.css code borders to zero, and last align the text (font) in the middle of the menu item space vertically (which sits in the menu container).

How the code should appear in your CSS file.

.MainMenu_MenuItem
{ /* (DNN default) - CSSNode - menuitemcssclass */
color: #000000; /* black, change font styles to fit your skin */
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
padding: 2px 5px 2px 5px; /* padding must be identical for .MainMenu_MenuItem, .MainMenu_MenuIcon, and .SubMenuItemSelected CSS Classes to prevent movement within menu on mouseover (hover) and mouseout. */
border-width: 0px 0px; border: 0px #FFFFFF solid; /* these control sub menu(s) borders, to remove the border you must mark these as zero, to maintain menu consistency do the same for .SubMenuItemSelected or .MainMenu_MenuItem CSS Class */
vertical-align: middle;
}