第三级菜单的宽度

Width of 3rd level of menu

本文关键字：菜单 第三级      更新时间：2023-09-26

我有一个下拉菜单。在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>

现在我想通过其中最长的文本自动设置每个第三级菜单（menu3）的宽度。所以在这个例子中，这个.menu3的宽度将是文本"SCOOTER Brezová/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");
                });
            }
            });
        }
    });

但是这个代码工作不好：-（.

Web：此处

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

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

尝试删除宽度规范和jQuery代码，并检查它是否有效。如果您需要级别3菜单的特定最小宽度，可以使用min-widthCSS属性。

编辑：好的，发现了。问题是.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中设置的宽度的影响。

相关文章：