Javascript jQuery css编辑方法不使用'；不适用于带有ul的nav ul li

在我的页面上，我有一个菜单，目前有六个链接。其中两个打开一个子菜单（li标签中的ul标签）。使用jQuery，我试图计算链接的数量（6），然后给每个链接一个页面宽度的1/6。使用此代码，我可以完成我的目标，但只能使用普通链接（没有子菜单）：

我的HTML如下所示：

<nav>
        <ul>
            <li class="menulink"><a href="#">Link1 (with submenu)</a>
            <ul>
            <li><a href="#">Submenuitem1</a></li>
            <li><a href="#">Submenuitem2</a></li>
            <li><a href="#">Submenuitem3</a></li>
            <li><a href="#">Submenuitem4</a></li>
            </ul>
        </li>
        <li class="menulink"><a href="#">Link2</a></li>
        <li class="menulink"><a href="#">Link3</a></li>
        <li class="menulink"><a href="#">Link4</a></li>
        <li class="menulink"><a href="#">Libk5</a></li>
        <li class="menulink"><a href="#">Link6 (with submenu)</a>
            <ul>
            <li><a href="#">Submenuitem1</a></li>
            <li><a href="#">Submenuitem2</a></li>
            <li><a href="#">Submenuitem3</a></li>
            </ul>
        </li>
        </ul>
    </nav>

---

根据您在评论中所说的，它没有将宽度应用于具有子菜单的项目

试试这个：

$( document ).ready(function() {
    // Gets the number of elements with class yourClass
    var amount = $('.menulink').length;

    // Calculates the width each element should get
    var width = 100/amount;
    width += "%";

    // Set the width on each element
    $("nav > ul > li").css('width', width);
});

---

列表和列表项上的显示值是多少？这可能就是问题所在。似乎有必要查看您的CSS。@Faust现在您可以查看我的CSS。我的输出为“6”，您的输出为“4”。我有6个链接，因此我认为最好使用输出为“6”。这应该是正确的宽度。我认为问题在于，带有子菜单的两个链接不受JQuery方法的影响

body
        {
            padding: 0;
            margin: 0;
            overflow-y: scroll;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 18px;
        }

    nav
        {
            background-color:#222;
        }

    nav ul
    {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    }

    nav ul li
    {
    display:inline-block;
    }

    nav ul li:hover
    {
    background-color: #333;
    }

    nav ul li a
    {
        color: #CCC;
    display: block;
    padding: 15px;
    text-decoration:none;
    }

    nav ul li a:hover
    {
    color: #CCC;
    text-decoration:none;
    }    


    nav ul ul
    {
    display:none;
    position:absolute;
    background-color: #333;
    border: 5px solid #222;
    border-top: 0;
    margin-left: -5px;
    width: 300px;
    }

    nav ul ul li
    {
    display:block;
    width: 300px;
    }

$( document ).ready(function() {
    // Gets the number of elements with class yourClass
    var amount = $('.menulink').length;

    // Calculates the width each element should get
    var width = 100/amount;
    width += "%";

    // Set the width on each element
    $("nav > ul > li").css('width', width);
});