JSFiddle - React, Tailwind, and code Playground

HTML

<body>



<header class="l-header">
	<div class="wrapper">

		

		

		<div class="b-main-menu">
			<nav>
				<ul class="main-menu">
                  
                  <li class="main-menu__item  main-menu__item--parent  ">
						<a href="/collection/Aksessuary" class="main-menu__link">Аксессуары</a>
                    
                    
                    <div class="b-subcols" style="width: 66px;">
                      
                      
                      <div class="subcol-col">
                      <div class="subcol-title"><a href="/collection/sumki">Сумки</a></div>
                      <ul class="subcols-list">
                        
                      </ul>
                        <div class="g-clear"></div>
                      </div>
                      
                    </div>
                    
					</li>
                  
                  <li class="main-menu__item  main-menu__item--parent  ">
						<a href="/collection/apparel" class="main-menu__link">Одежда</a>
                    
                    
                    <div class="b-subcols" style="width: 252px;">
                      
                      
                      <div class="subcol-col">
                      <div class="subcol-title"><a href="/collection/Bryuki">Брюки</a></div>
                      <ul class="subcols-list">
                        
                        <li><a href="/collection/kategoriya-2">Подкатегория 1</a></li>
                        
                        <li><a href="/collection/podkategoriya-2">Подкатегория 2</a></li>
                        
                        <li><a href="/collection/podkategoriya-3">Подкатегория 3</a></li>
                        
                      </ul>
                        <div class="g-clear"></div>
                      </div>
                      
                      <div class="subcol-col">
                      <div class="subcol-title"><a...

CSS

/* line 5, ../../../../../Users/ByKraB/.rvm/rubies/ruby-1.9.3-p286/lib/ruby/gems/1.9.1/gems/compass-core-1.0.0.alpha.17/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../../../Users/ByKraB/.rvm/rubies/ruby-1.9.3-p286/lib/ruby/gems/1.9.1/gems/compass-core-1.0.0.alpha.17/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, ../../../../../Users/ByKraB/.rvm/rubies/ruby-1.9.3-p286/lib/ruby/gems/1.9.1/gems/compass-core-1.0.0.alpha.17/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../../../Users/ByKraB/.rvm/rubies/ruby-1.9.3-p286/lib/ruby/gems/1.9.1/gems/compass-core-1.0.0.alpha.17/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../../../Users/ByKraB/.rvm/rubies/ruby-1.9.3-p286/lib/ruby/gems/1.9.1/gems/compass-core-1.0.0.alpha.17/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../Users/ByKraB/.rvm/rubies/ruby-1.9.3-p286/lib/ruby/gems/1.9.1/gems/compass-core-1.0.0.alpha.17/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103,...

JavaScript

window.onload = function(){
   calculateColsWidth(); 
}

function calculateColsWidth(){
  $('.main-menu .main-menu__item--parent').each(function(){
    var subcolsContainer = $(this).find('.b-subcols');
    var contWidth = 0;
    $('.subcol-col',subcolsContainer).each(function(){
      	contWidth+= $(this).outerWidth()+10;
      	console.log('contWidth= '+contWidth);
    });
    
    if(contWidth > 980)
      contWidth = 980;
    console.log('contWidth next');
    subcolsContainer.width(contWidth);
    
  }); 
  
}