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级菜单（menu3）的宽度。所以在这个例子中，这个.menu3的宽度将是文本“SCOOTERBrezová/ Visonta / HU”的宽度。

我无法使用css，因为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");
                });
            }
            });
        }
    });

但是这段代码很糟糕： - （。

网址：Here

Answer 1

您将menu3 ul的宽度设置为345px，这会导致较长的文本重叠。 Javascript只是再次设置这个宽度。

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

尝试删除宽度规范和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中设置的宽度的影响。

第3级菜单的宽度

1 个答案: