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

Wordpress 3级水平导航-需要jquery/javascript帮助进行对齐,javascript,jquery,css,navigation,Javascript,Jquery,Css,Navigation,我一直在尝试实现3级水平导航,但最后一级却被卡住了。我必须在最后一级使用绝对位置,因为使其相对将菜单项宽度绑定到父菜单项的宽度,父菜单项是第二级菜单项的宽度 我不太熟悉javascript/jquery,但我希望确保子元素始终位于父元素之下 这就是我想到的,它运行得非常好 jQuery(function($) { $(window).on('resize', function() { var submenu = jQuery('#top-menu').position().top

我一直在尝试实现3级水平导航,但最后一级却被卡住了。我必须在最后一级使用绝对位置,因为使其相对将菜单项宽度绑定到父菜单项的宽度,父菜单项是第二级菜单项的宽度

我不太熟悉javascript/jquery,但我希望确保子元素始终位于父元素之下


这就是我想到的,它运行得非常好

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