.MainMenu_SubMenuItemSelected - Description

This additional style class is used by DotNetNuke to style the sub menu item when the mouse hovers over sub menu item, hence the name 'Main Menu, Sub Menu Item Selected'.

This CSS class is not found in default.css file, therefore, there is no original code for it.

.MainMenu_SubMenuItemSelected - Example

To help us understand the DonNetNuke CSS Class .MainMenu_SubMenuItemSelected better and the part of the menu that is affected. We will insert the following demonstration code border: solid 4px green; background-color: salmon; height: 30px;. This demonstration code will display solid borders with a border color of 'green' and a weight of '4px', and background-color of 'salmon' with a height of 30px.

The .MainMenu_SubMenuItemSelected skin.css demonstration code display.

Live Demo

This image shows you the .MainMenu_SubMenuItemSelected 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_SubMenuItemSelected multiple CSS classes skin.css demonstration code display.

Live Demo

This image has the demonstration code for all the default.css classes, along with the .MainMenu_SubMenuItemSelected CSS Class with a yellow background for the Sub Menu Item Selected. This helps to demonstrate the continuous change that is slowly taking place to the Main Menu.

.MainMenu_SubMenuItemSelected - Tips & Tricks

Learn about the most common practices used in the DotNetNuke Solpart Menu Main Menu Sub Menu Item Selected 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 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_SubMenuItemSelected - Suggestions

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

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

Due to various web browsers and their limitations we recommend that you keep your DotNetNuke Horizontal and Vertical Solpart Menu, Main Menu, Sub Menu Item Selected 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, align the text (font) in the middle of the menu item space vertically (which sits in the menu container), and last set the background to be a light gray (#CACACA).

How the code should appear in your CSS file.

.MainMenu_SubMenuItemSelected
{ /* (not a DNN default) - CSSNodeHoverSub - submenuitemselectedcssclass */
color: #666666; /* 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;
background: #CACACA;
}