各ドロップダウンレベルの幅を個別に設定する方法

Question

私はメニューを作成中です。 あなたはそれがここに住んで見ることができます：http://lumenis.bondtest.nl/Surgical

それはこの1つについてです：

第3レベルのメニューは、メニューは完全に同じ幅を有するようになり、同じクラス（ドロップダウンメニュー）を持っています。だから私は問題の原因を知っているが、私はそれを解決する方法がわからない。

ブートストラップがこのクラスで動作しているため、ドロップダウンメニューを削除して個々のクラスを提供することはできません。例えば

：それはホバーに変わるので、それは本当に奇妙に見えるのです

。

これは私のコードです：

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

誰も私を助けることができますか？前もって感謝します。

EDIT： が、私はこのようにそれを解決するには：

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

第2レベルのドロップダウンの場合はクラスdropdown0を使用し、第3レベルのドロップダウンの場合は固定幅のクラスdropdown1を使用します。

これらのクラスは既に適用されているため、個別にスタイルを設定できます。