Hey, I have modified a script to display a second/child level horizontal menu for the current page in WP, that alters on hover over the other top level items to show each relevant child level menu. Whilst on top level items, this works fine. When hovering off the menu, the second level reverts to that for the current page.
My problem is when the current page is a child page itself, the child menu it is part of is shown only whilst hover is on the child or parent menu. Mousing out of the area disappears the menu. What I am trying to achieve is to have this menu shown persistently, so that it is displayed and only swapped out when the user hovers on another top level menu item (as happens when the current page is top level).
If that's a poor explanation, I apologise - here's a page working as I anticipate (top-level):
http://www.lunatestsite.co.uk/claremont
and here's a child page where the hover-off disappears the menu:
http://www.lunatestsite.co.uk/claremont/services/test-sub2
The script is basically a slimmed down version of :
http://www.stunicholls.com/menu/jquery-dropline-7.html
The jQuery :
jQuery(document).ready(function(){
jQuery("#dropline li.current-menu-item").children("ul").css("left", "0px").show();
jQuery("#dropline li.current_page_parent").children("ul").css("left", "0px").show();
jQuery("#dropline li.current-menu-item").children(":first-child").css("color", "#c00");
jQuery("#dropline li").hover(function(){
if(this.className.indexOf("current-menu-item") == -1) {
getCurrent = jQuery(this).parent().children("li.current-menu-item:eq(0)");
if (getCurrent = 1 ) {
jQuery(this).parent().children("li.current-menu-item:eq(0)").children("ul").hide();
}
jQuery(this).children("ul:eq(0)").css("left", "0px").show();
}
},
function(){
if(this.className.indexOf("current-menu-item") == -1) {
getCurrent = jQuery(this).parent().children("li.current-menu-item:eq(0)");
if (getCurrent = 1 ) {
jQuery(this).parent().children("li.current-menu-item:eq(0)").children("ul").show();
}
jQuery(this).children("ul:eq(0)").css("left", "-99999px").hide();
}
});
});
My jQuery is sketchy at best- if anyone can point out where I'm going wrong that'd be awesome. Thanks!