let me start from the 3rd level menu items, to properly display them you need to add the following css to your theme:
We need to rewrite the rest of the code we provided you with so now it looks like this:
.navigation .level
0
li a.selected,
.navigation .level
0
li a:hover
{
background
:
url
(img/nav-sub-
level
.png)
no-repeat
top
left
!important
;
padding
:
0px
!important
;
margin
:
0px
10px
0px
0px
!important
;
}
.navigation .level
0
li a.selected span,
.navigation .level
0
li a:hover span
{
background
:
url
(img/nav-sub-
level
.png)
no-repeat
top
right
!important
;
margin
:
0
-10px
0
10px
!important
;
padding
:
4px
0px
0px
0px
!important
;
height
:
22px
!important
;
width
:
180px
;
}
/* MonoX Simple Menu - Parent Selector implementation
NOTE: This javascript code is strongly tied to MonoXMenuSimple.ascx menu template */
$(document).ready(
function
() {
InitMonoXMenuSelectors();
var
prm = Sys.WebForms.PageRequestManager.getInstance();
if
(prm !=
null
) {
prm.add_endRequest(
function
(s, e) {
InitMonoXMenuSelectors();
});
}
});
jQuery.MonoXMenu_GetParent =
function
(parent, level) {
var
resultParent = $(parent);
var
i = 0;
while
(i < level) {
resultParent = resultParent.parent();
i++;
}
return
resultParent;
}
jQuery.MonoXMenu_SelectTopLevel =
function
(parent) {
$.MonoXMenu_GetParent(parent, 3).addClass(
'selected'
);
}
jQuery.MonoXMenu_DeselectTopLevel =
function
(parent) {
$.MonoXMenu_GetParent(parent, 3).removeClass(
'selected'
);
}
jQuery.MonoXMenu_SelectOtherLevel =
function
(parent) {
$($.MonoXMenu_GetParent(parent, 3).find(
'a'
)[0]).addClass(
'selected'
);
}
jQuery.MonoXMenu_DeselectOtherLevel =
function
(parent) {
$($.MonoXMenu_GetParent(parent, 3).find(
'a'
)[0]).removeClass(
'selected'
);
}
function
InitMonoXMenuSelectors() {
$(
".navigation .level0 li a"
).hover(
function
() { $.MonoXMenu_SelectTopLevel(
this
); },
function
() { $.MonoXMenu_DeselectTopLevel(
this
); });
$(
".navigation .level1 li a"
).hover(
function
() {
$.MonoXMenu_SelectTopLevel($.MonoXMenu_GetParent(
this
, 2));
$.MonoXMenu_SelectOtherLevel(
this
);
},
function
() {
$.MonoXMenu_DeselectTopLevel($.MonoXMenu_GetParent(
this
, 2));
$.MonoXMenu_DeselectOtherLevel(
this
);
});
$(
".navigation .level2 li a"
).hover(
function
() {
$.MonoXMenu_SelectTopLevel($.MonoXMenu_GetParent(
this
, 4));
$.MonoXMenu_SelectOtherLevel($.MonoXMenu_GetParent(
this
, 2));
$.MonoXMenu_SelectOtherLevel(
this
);
},
function
() {
$.MonoXMenu_DeselectTopLevel($.MonoXMenu_GetParent(
this
, 4));
$.MonoXMenu_DeselectOtherLevel($.MonoXMenu_GetParent(
this
, 2));
$.MonoXMenu_DeselectOtherLevel(
this
);
});
}
//Note: Add the below code only if you are including this script to a page with the ScriptInclude
//DO NOT REMOVE - Note: Call the notifyScriptLoaded method in all file-based scripts (.js files) to indicate to the ScriptManager object that a referenced script has finished loading. - http://msdn.microsoft.com/en-us/library/bb310952(VS.90).aspx
try
{
if
(
typeof
(Sys) !==
'undefined'
) Sys.Application.notifyScriptLoaded(); }
catch
(ex) { }
Please try the code above and get back to us.