Hi,
I am trying to design a global navigation with 4 levels. I need flyouts for the first three levels and the last level items must be expanded below their respective level 3 items.
I tried the below code, but for some reason the level 4 items appear as flyouts too. Please help me understand what I am missing. Thanks in advance.
<SharePoint:AspMenu
ID="TopNavigationMenuV4"
Runat="server"
EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="”
UseSimpleRendering=”true”
UseSeparateCss=”false”
Orientation=”Horizontal”
StaticDisplayLevels=”2″
MaximumDynamicDisplayLevels=”3″
SkipLinkText=”"
CssClass=”s4-tn” Width=”287px”/>
and the following styling:
.s4-tn
{
padding:0px;
margin:0px;
font-family:Calibri;
font-size: 11pt !important;
padding-left: 10px;
}
.s4-tn li.static > .menu-item
{
color:#FFFFFF;
border:1px solid #93c2ec;
padding: 4px 10px;
line-height: 20px;
height: 20px;
background:(“/_layouts/Images/selbg.png”) repeat-x left top;
background-color:#9C3633;
}
.s4-tn li.static > a:hover
{
background: url(“/_layouts/Images/selb.png”) repeat-x left top;
background-color:#E4B3B2;
color:#FFFFFF;
text-decoration:none;
color:#9C3633;
font-weight:bold;
}
.s4-toplinks .s4-tn a.selected
{
background: url(“/_layouts/Images/selb.png”) repeat-x left top;
background-color:#9C3633;
color:#FFFFFF;
text-decoration:none;
border:1px transparent solid;
padding-right: 10px;
padding-left:10px;
margin:0px;
}
.s4-tn li.dynamic > .menu-item{
padding:10px 20px 10px 20px;
}
.s4-tn li.dynamic > a{
font-weight:normal;
color:#9C3633;
background-color:#E4B3B2;
}
.s4-tn li.dynamic > a:hover{
font-weight:bold;
background-color:#F2DCDB;
color:#9C3633;
}
.s4-tn ul li a {
color:gray;
}