WordPress 3级水平导航-需要jquery / javascript帮助进行对齐

Question

我一直在尝试实现3级水平导航，但是我停留在最后一个。 我必须在最后一级使用绝对位置，因为使其相对会限制菜单项的宽度与父级（第二级菜单项）的宽度。

我对javascript / jquery不太熟悉，但是我想确保子元素始终位于父元素之下。

http://generationesignstaging.com/safari/safaris/value-safaris/the-beast-retreat/

Answer 1

这是我想出的，效果很好。

jQuery(function($) {
    $(window).on('resize', function() {
    var submenu = jQuery('#top-menu').position().top+jQuery('#top-menu').outerHeight(true);
      jQuery('.sub-menu').css('top',submenu);

/** 3rd level navigation top position **/ 
var height_sm = jQuery('#top-menu').find('.sub-menu').outerHeight();
jQuery('.menu-item .menu-item > .sub-menu').css('top', height_sm);   

/** Maximum width of the page **/  
var container = $('#page-container').width(); 

/** Compute horizontal position of the 3rd menu **/ 
$('#top-menu').find('.sub-menu .menu-item-has-children').each(function() { 
    var item = $(this).children('.sub-menu').width(); 
    var position = $(this).position();
    var total = item + position.left; 
    if (total > container){
        var ofset = total-container; 
        var calc = position.left - ofset;  

        $(this).children('.sub-menu').css('left',calc);
    }
    else{
    $(this).children('.sub-menu').css('left',position.left);
}
}); 
    }).trigger('resize');
});