In IE it works fine, though in FireFox the menu doesn't do fade transition. Also small difference in table layout, but that's the second problem...
This is the ascx-code I used:
<td><dnn:MENU
runat="server"
id="dnnSOLPARTMENU"
menualignment="right"
cleardefaults="true"
separatecss="true"
userootbreadcrumbarrow="false"
usesubmenubreadcrumbarrow="false"
menueffectsmenutransition="AlphaFade"
menueffectsmenutransitionlength="10"
menueffectsshadowstrength="1"
menueffectsmouseoverdisplay="None"
usearrows="false"
leftseparator="<img src="images/nav_dots_l.jpg">"
rightseparator="<img src="images/nav_dots_r.jpg">"
rootmenuitemcssclass="MainMenu_Idle"
rootmenuitemactivecssclass="MainMenu_Active"
rootmenuitemselectedcssclass="MainMenu_Selected"
rootmenuitembreadcrumbcssclass="MainMenu_BreadcrumbActive"
rootmenuitemlefthtml=""
rootmenuitemrighthtml=""
separator="" /></td>
These are the CSS references:
.MainMenu_MenuContainer {
padding-left: 0px;
BACKGROUND-COLOR: transparent;
WIDTH: 180px;
HEIGHT: 30px;
}
.MainMenu_MenuBar {
CURSOR: hand;
HEIGHT: 30px;
WIDTH: 180px;
BACKGROUND-COLOR: transparent;
}
.MainMenu_MenuItem {
BORDER-RIGHT: #ff0000 0px solid;
BORDER-TOP: #CCD7E1 0px solid;
BORDER-LEFT: #CCD7E1 0px solid;
BORDER-BOTTOM: #CCD7E1 0px solid;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
CURSOR: hand;
COLOR: #FFFFFF;
FONT-STYLE: normal;
FONT-FAMILY: Arial, Helvetica, sans-serif;
padding-left: 15px;
padding-right: 15px;
HEIGHT: 30px;
BACKGROUND-COLOR: #B30000;
text-transform: uppercase;
}
.MainMenu_MenuIcon {
display:none
}
.MainMenu_SubMenu {
CURSOR: hand;
Z-INDEX: 0;
COLOR: #eeeeee;
background-position: left top;
border: 0px solid #ffffff;
background-color: #ffffff;
}
.MainMenu_MenuBreak {
BORDER-RIGHT: # 0px solid;
BORDER-TOP: #eeeeee 0px solid;
BORDER-LEFT: #eeeeee 0px solid;
BORDER-BOTTOM: #eeeeee 0px solid;
HEIGHT: 0px;
BACKGROUND-COLOR: transparent;
}
.MainMenu_MenuItemSel {
BORDER-RIGHT: #ffffff 0px solid;
BORDER-TOP: #ffffff 0px solid;
BORDER-LEFT: #ffffff 0px solid;
BORDER-BOTTOM: #ffffff 0px solid;
Z-INDEX: 0;
CURSOR: hand;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
CURSOR: hand;
COLOR: #000000;
FONT-STYLE: normal;
FONT-FAMILY: Arial, Helvetica, sans-serif;
padding-left: 15px;
HEIGHT: 30px;
text-transform: uppercase;
padding-right: 15px;
background-position: left top;
background-color: #FFFFFF;
background-repeat: repeat-x;
}
.MainMenu_MenuArrow {
display:none
}
.MainMenu_RootMenuArrow {
display:none
}
I hope someone can help me...