菜单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中设置的宽度的影响。