.MainMenu_SubMenuItemActive
Styles the sub-menu item for the currently selected page. In the image below you can see that page three is currently displayed. Here you can see we have applied a background color of blue and a height of 50px to emphasise the styling for this example.
Note: The border displays for this item, but once you hover over the item the top and bottom borders disappear leaving just the left and right borders.
.MainMenu_SubMenuItemActive
{
border: solid 10px purple;
background-color: blue;
height: 50px;
padding: 20px;
}
.MainMenu_RootMenuItemSelected
Styles the root menu items when you hover over the item with the mouse. Here you can see we have applied a background color of lime, so you could also use this to specify a background image for the hover over root menu item.
Note: You will notice however that the borders specified below do not display in the menu.
.MainMenu_RootMenuItemSelected
{
border: solid 10px purple;
background-color: Lime;
height: 50px;
}
.MainMenu_SubMenuItemSelected
Styles the sub-menu items when you hover over the item with the mouse. Here you can see we have applied a background color of aqua.
Note: You will notice however that just the left and right borders display when hovering over the sub-menu items.
.MainMenu_SubMenuItemSelected
{
border: solid 10px purple;
background-color: Aqua;
height: 50px;
}
