.MainMenu_SubMenu - Description

This default style class is used by DotNetNuke to style the main menu sub menu's over all appearance for the sub menu boxes, hence the name 'Main Menu, Sub Menu'. You can set the sub menu's background-color and border using this CSS class.

The original code from default.css file is z-index: 1000; cursor: pointer; background-color: #FFFFFF; border-bottom: #FFFFFF 0px solid; border-left: #FFFFFF 0px solid; border-top: #FFFFFF 0px solid; border-right: #FFFFFF 0px solid; These properties of the .MainMenu_SubMenu CSS Class have specific function, which we will now breakdown for you.

.MainMenu_SubMenu - CSS Property Functions

Below you can view the original .MainMenu_SubMenu 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_SubMenu - Example

To help us understand the DonNetNuke CSS Class .MainMenu_SubMenu better and the part of the menu that is affected. We will replace the original default.css code z-index: 1000; cursor: pointer; background-color: #FFFFFF; border-bottom: #FFFFFF 0px solid; border-left: #FFFFFF 0px solid; border-top: #FFFFFF 0px solid; border-right: #FFFFFF 0px solid; currently in our skin.css file with z-index: 1000; cursor: pointer; background-color: #FF00FF; border-bottom: #FFFFFF 4px solid; border-left: #FFFFFF 4px solid; border-top: #FFFFFF 4px solid; border-right: #FFFFFF 4px solid;. This demonstration code will change the sub menu from a gray (#CCCCCC) background to a white border with a fuchsia background.

Below you can view the demonstration .MainMenu_SubMenu CSS code as it appears in the skin.css file used in the DNN_Gray Skin and images validating 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_SubMenu skin.css demonstration code display.

Live Demo

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

Live Demo

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

.MainMenu_SubMenu - Tips & Tricks

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

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;
}  

.MainMenu_SubMenu - Suggestions

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

Horizontal and Vertical Solpart Menu Property Suggestions - For the Default .MainMenu_SubMenu 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 CSS Class Properties simple., i.e. z-index: 1000; padding: 0px; border: 1px #666666 solid; filter:progid:DXImageTransform.Microsoft.Shadow(color='#ACACAC', Direction=135, Strength=3); background: #FFFFFF;. This tells the browser to specifies the stack level of the box for the Sub Menu, pad the box edges with 0px, give the box a shadow, and last a white background color.

How the code should appear in your CSS file.

.MainMenu_SubMenu
{ /* (DNN default) - CSSContainerSub - submenucssclass */
z-index: 1000;
padding: 0px;
border: 1px #66666 solid; /* Change the border style to fit your skin */
filter:progid:DXImageTransform.Microsoft.Shadow (color='#ACACAC', Direction=135, Strength=3); /* only works for ie (Internet Explorer) */
background: #FFFFFF; /* Change the background color/image to fit your skin */
}