Wie man die Breite jeder Dropdown-Ebene individuell einstellt

Question

Ich arbeite an einem Menü. Sie können es hier live sehen: http://lumenis.bondtest.nl/Surgical

Es geht um diese:

Die dritte Ebene Menü hat die gleiche Klasse (Dropdown-Menü), die die Menüs bewirkt genau die gleiche Breite haben. Ich weiß also, was das Problem verursacht, aber ich bin mir nicht sicher, wie ich es lösen soll.

Ich kann das Dropdown-Menü nicht entfernen und gebe ihnen beide eine individuelle Klasse, da Bootstrap mit dieser Klasse arbeitet.

Zum Beispiel:

Was es wirklich seltsam aussehen lässt, weil es auf schweben ändert.

Dies ist mein Code:

<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> 
[/>] 

Kann mir jemand helfen? Danke im Voraus.

EDIT: ich es wie folgt gelöst:

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

für die größte Breite gesucht und legen Sie die max-width.

Answer 1

Verwenden Sie für die Dropdown-Listen der zweiten Ebene die Klasse dropdown0 und für das Dropdown-Menü der dritten Ebene feste Breiten mit der Klasse dropdown1.

Diese Klassen werden bereits angewendet, sodass Sie sie individuell gestalten können.