.MainMenu_MenuArrow - Description

This default style class is used by DotNetNuke to style the arrow on the right hand side of the sub menu items, which sits to the right of the sub menu item whenever there is a sub-sub-menu item, hence the name 'Main Menu, Menu Arrow'.

The original code from default.css file is font-family: webdings; font-size: 10pt; cursor: pointer; border-right: white 1px solid; border-bottom: white 1px solid; border-top: white 0px solid;. These properties of the .MainMenu_MenuArrow CSS Class have specific functions, which we will now breakdown for you.

.MainMenu_MenuArrow - CSS Property Functions

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

To help us understand the DonNetNuke CSS Class .MainMenu_MenuArrow better and the part of the menu that is affected. We will replace the original default.css code font-family: webdings; font-size: 10pt; cursor: pointer; border-right: #FFFFFF 1px solid; border-bottom: #FFFFFF 1px solid; border-top: #FFFFFF 0px solid; currently in our skin.css file with font-family: webdings; font-size: 10pt; cursor: pointer; border-right: teal 4px solid; border-bottom: teal 4px solid; border-top: teal 4px solid; background-color: coral;. This demonstration code will change the arrow on the right hand side of the sub menu from a right and bottom borders that are #FFFFFF (white) 1px solid to a right, bottom, and top borders that are teal 4px solid and a background-color of coral.

Below you can view the demonstration .MainMenu_MenuArrow 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_MenuArrow skin.css demonstration code display.

Live Demo

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

Live Demo

This image has the demonstration code for .MainMenu_MenuContainer, .MainMenu_MenuBar, .MainMenu_MenuItem, .MainMenu_MenuIcon, .MainMenu_SubMenu, .MainMenu_MenuBreak, and .MainMenu_MenuItemSel CSS Classes active keeping a blue border with an orange background for the Menu Container, a height of 30px for the Menu Bar, the red and yellow border with the pink background for the Menu Items, and the lime background and purple border for the Menu Icons, the fuchsia background and white border for the Sub Menu, the Menu Break demonstration code does not have an affect on the Main Menu, font-size of 15pt and a background of cyna/aqua for the menu item select, along with the .MainMenu_MenuArrow CSS Class with the right, bottom, and top teal borders and coral background for the Menu Arrows. This helps to demonstrate the continuous change that is slowly taking place to the Main Menu.

.MainMenu_MenuArrow - Tips & Tricks

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

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

.MainMenu_MenuArrow - Suggestions

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

Horizontal and Vertical Solpart Menu Property Suggestions - For the Default .MainMenu_MenuArrow 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 Arrow CSS Class Properties simple., i.e. display:none;. This tells the browser to remove the arrows from the Sub Menus.

How the code should appear in your CSS file.

.MainMenu_MenuArrow
{ /* (DNN default) - CSSIndicateChildSub - menuarrowcssclass */
display:none; /* removes arrow display from sub menu(s) */
}