<div class="wrapper">
<ul id="menu">
  <li><a href="#">1 пункт</a></li>
  <li><a href="#">2 длинный пункт</a></li>
  <li><a href="#">2 длинный пункт</a></li>
  <li><a href="#">3 очень длинный пункт</a></li>
</ul>

<div id="submenu" class="megamenu">
  <ul>
  <li><a href="#">пункт субменю</a></li>
  <li><a href="#">пункт субменю</a></li>
  <li><a href="#">пункт субменю</a></li>
  </ul>
  
   <ul>
  <li><a href="#">пункт субменю</a></li>
  <li><a href="#">пункт субменю</a></li>
  <li><a href="#">пункт субменю</a></li>
  </ul>
  
 <ul>
  <li><a href="#">пункт субменю</a></li>
  <li><a href="#">пункт субменю</a></li>
  <li><a href="#">пункт субменю</a></li>
  </ul>
</div>
  </div>

.wrapper{
  position:relative;
  background:#f1f1f1;
  padding:10px;
}
#menu{
  display:flex;
  list-style:none;
  padding:0px;
      max-width: 500px;
    width: 100%;
    justify-content: space-between;
  border:1px #000 solid;
}
#menu li a{
  padding:0 0px;
  }
#menu li{
  padding:0 10px;
    border:1px #cc0000 solid;
  }

#menu li:first-child{
  margin-left:0px;
}
.megamenu{
  display:flex;
      max-width: 700px;
    width: 100%;
    justify-content: space-between;
  border:1px #000 solid;
}
.megamenu ul{
    list-style:none;
  padding:0px;
  border:1px #cc0000 solid;
  margin:0 0px;
  padding:10px;
}
.megamenu ul li{
  border-bottom:1px #000 solid;
}
.megamenu ul:first-child{
  margin-left:0px;
}

$(function() {

  
//const $menuItems = $('#menu a');
//$('#submenu > ul').width(i => $menuItems.eq(i).width());
 /* $('#menu li').each(function(i,elem) {
  var w = $(elem).width().toFixed();
  console.log(w);
});
 */ 
});