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 .level0 li a.selected,
.navigation .level0 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 .level0 li a.selected span,
.navigation .level0 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).aspxtry { if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded(); } catch (ex) { }