メニューの第3レベルの幅

Question

私はスライドダウンメニューを持っています。

<menu> 
    <li id="vysledky"><a href="#">Výsledky</a> 
     <ul class="menu2"> 
      <li>2008 
       <ul class="menu3"> 
        <li><a href="#">21.08. - MMSR SCg</a></li> 
        <li><a href="#">R SCOOechová Potôň SK</a></li> 
        <li><a href="#">SCOOTER Brezová /Visonta/ HU</a></li> 
       </ul> 
      </li> 
      <li>2010</li> 
      <li>2011<</li> 
     </ul> 
    </li> 
    <li id="forum"><a href="#" class="prvy"><span>Fórum</span></a></li> 
</menu> 

を、今私は自動にそれで最も長いテキストでメニュー（MENU3）の各3レベルの幅を設定したい：HTMLで私が持っています。この例では、この.menu3の幅はテキスト "SCOOTERBrezová/ Visonta/HU"の幅になります。

menu2の幅が安定していて、menu2よりも長い場合は、menu2の幅に設定します（カスケード） したがって、javascript（jquery）を使用します。私はこのコードを持っている：

 var i; 
    var podm; 

    $('menu>li').each(function() { 
     podm = 0; 
     if($(this).children('ul').size()) { 
      $(this).each(function() { 

       if($(this).children('ul').size()) { 
      $(this).each(function() { 

       podm++; 
        i = 60; 
$(this).find('li a').each(function() { 
    var w = $(this).text(); 
    $('#js').text(w); 
    w = $('#js').width(); 
    if(w > i) { 
     i = w; 
    } 
}); 
       $(this).find("ul.menu3").css("width"); 
       }); 
      } 
      }); 
     } 
    }); 

をしかし、このコードは悪い:-(を作品

ウェブ：。。あなたが長いテキストがオーバーラップするようになり345pxにmenu3 ULの幅を設定Here

Answer 1

Javascriptがもう一度、この幅を設定します。

<ul class="menu3" style="width: 345px; display: block; opacity: 0.13"> 

あなたはSPが必要な場合。幅仕様とjQueryのコードを削除し、それが動作するかどうかを確認してくださいレベル3メニューの最小幅を指定するには、min-width CSS属性を使用します。

編集： よろしくお願いします。問題はposition: relativeの属性が.menu3です。 .menu3のためのCSSは次のようになります。

.menu3 { 
    display: none; 
    position: absolute; /* This changed */ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    left: 100px; 
    top: 0px; /* This changed */ 
    background: #464646 url('3menu-po.png') repeat-y; 
    display: none; 
    white-space: nowrap; 
} 

position: absoluteに注意してください。これにより、サブメニューがドキュメントフローから外れます。したがって、.menu2に設定された幅の影響を受けません。