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

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

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

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

最佳答案

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

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');
});