Как установить ширину каждого выпадающего уровня индивидуального

Question

Я работаю над меню. Вы можете видеть, что здесь живут: http://lumenis.bondtest.nl/Surgical

Это примерно такой:

меню третьего уровня имеет (выпадающий-меню) тот же класс, который вызывает меню, чтобы иметь точно такую ​​же ширину. Поэтому я знаю, что вызывает проблему, но я не уверен, как ее решить.

Я не могу удалить раскрывающееся меню и дать им как отдельный класс, так как bootstrap работает с этим классом.

Например:

Что делает это выглядит очень странно, потому что она меняется при наведении курсора мыши.

Это мой код:

<nav class="navbar navbar-default lumenisInnerMenu" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
     </div> 
     <div class="collapse navbar-collapse lumenisListItems"> 
      <ul class="nav navbar-nav"> 
       [*>NODE] 
      </ul> 
     </div> 
    </div> 
</nav> 

[>NODE] 
    <li class="[?SELECTED]dir current[/?][?NODE]dropdown-submenu HasChildren child[=DEPTH] dropdownmenu [/?]"> 
    [?ENABLED] 
     <a [?!NODE] href="[=URL]" [/?] class="[?NODE]dropdown-toggle[/?]" data-toggle="dropdown"> 
       <div class="textsubitem"> 
        <span>[=TEXT]</span> 
       </div> 
     </a> 
    [?ELSE] 
     <a href="#" [?NODE] [/?]> [?NODE] 
      <span>[=TEXT]</span>[/?] 
     </a> 
    [/?] 
    [?NODE] 
     <ul class="dropdown-menu dropdown[=DEPTH]" id="[=ID]"> 
      [*>NODE] 
     </ul> 
    [/?] 
    </li> 
[/>] 

Может кто-нибудь мне помочь? Заранее спасибо.

РЕДАКТИРОВАТЬ: Я решил это следующим образом:

if ($(window).width() > 960) { 
    var maxWidth = 0; 
    $('.dropdown0').each(function(){ 
     var itemWidth = $(this).outerWidth(true); 
     maxWidth = Math.max(maxWidth, itemWidth) + "px"; 
     $(".dropdown0 > li").css("max-width", maxWidth); 
    }); 
} 

Искал самую широкую ширину и установить максимальную ширину.

Answer 1

Для выпадающих списков второго уровня используйте класс dropdown0, а для раскрывающегося списка третьего уровня используйте фиксированную ширину с классом dropdown1.

Эти классы уже применяются, поэтому вы можете их индивидуально подгонять.