菜單3級寬度

Question

我有一個下拉菜單。在HTML我有：

<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> 

，現在我想通過它的最長文本全自動設置菜單（菜單3）各3級的寬度。所以在這個例子中，這個.menu3的寬度將是文本「SCOOTERBrezová/ Visonta/HU」的寬度。

我不能使用CSS，因爲menu2的寬度是穩定的，如果它將比menu2長它的菜單2的寬度（級聯） 所以我會使用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"); 
       }); 
      } 
      }); 
     } 
    }); 

但此代碼的工作不好:-(

網站：Here

Answer 1

您的menu3 UL的寬度設置爲345px導致較長的文本重疊的。 JavaScript的只是再一次將這個寬度。

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

嘗試刪除寬度規格和jQuery代碼，並檢查是否正常工作。如果你需要一個SP可以使用min-width CSS屬性。

編輯： 好的，發現它。問題是.menu3中的position: relative屬性。爲.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中設置的寬度的影響。