Hi All,
I am trying to create a menu which has a border around each menu item. I can't get this to work correctly. The border doesn't appear correclty near the right arrow (which has child items). Hope someone can help with this as I need this to work urgently.
The code I used in the skin.ascx is :
<dnn:NAV runat="server" id="dnnNAV" ProviderName="DNNMenuNavigationProvider" StyleBorderWidth="2" CSSContainerSub="Main_DNNMenu_ContainerSub" CSSNodeRoot="Main_DNNMenu_NodeRoot" CSSNode="Main_DNNMenu_Node" CSSNodeHover="Main_DNNMenu_NodeHover" StyleIconWidth="0" CSSIcon="MainMenu_MenuIcon" CSSIndicateChildSub="MainMenu_IndicateChildSub" CSSRightSeparatorBreadCrumb="MainMenu_MenuArrow" CSSRightSeparator="MainMenu_MenuArrow" ControlAlignment="Center" StyleBackColor="#FFFFFF" CSSIndicateChildRoot="Main_DNNMenu_RootMenuArrow" />
The code in the skin.css:
.Main_DNNMenu_ContainerSub
{
background-color:#EF0043;
z-index: 1000;
cursor: pointer;
cursor: hand;
padding: 1px 1px 1px 1px;
}
.Main_DNNMenu_NodeRoot
{
cursor: pointer;
cursor: hand;
color: White;
font: normal 12px Verdana;
font-weight: normal;
font-style: normal;
background-color: Transparent;
white-space: nowrap;
padding: 0px 20px 0px 10px;
}
.Main_DNNMenu_Node
{
cursor: pointer;
cursor: hand;
color: White;
font-size: 10pt;
font-weight: normal;
font-style: normal;
font-family: Tahoma, Arial, Helvetica;
background-color: Transparent;
white-space: nowrap;
padding: 2px 10px 2px 10px;
z-index: 1000;
border-right: solid 1px white;
border-bottom: solid 1px white;
border-top: solid 1px white;
border-left: solid 1px white;
}
.Main_DNNMenu_Node td
{
cursor: pointer;
cursor: hand;
color: White;
font-size: 10pt;
font-weight: normal;
font-style: normal;
font-family: Tahoma, Arial, Helvetica;
background-color: Transparent;
white-space: nowrap;
padding: 2px 10px 2px 10px;
z-index: 1000;
}
.MainMenu_MenuIcon
{
display: none;
}
.Main_DNNMenu_NodeHover
{
background-color: #685353;
}
.Main_DNNMenu_NodeHover td
{
background-color: #685353;
}
.Main_DNNMenu_RootMenuArrow
{
display: none;
}
.MainMenu_MenuArrow
{
display: none;
}
.MainMenu_IndicateChildSub td
{
border-top: #FFFFFF 1px solid;
border-right: #FFFFFF 0px solid;
border-left: #FFFFFF 0px solid;
border-bottom: #FFFFFF 1px solid;
}
Not sure how to attach a screen shot, don't seem to be having access. i am using dotnetnuke version 05.06.00