jQuery css-editing method doesn't apply to nav ul li with ul in them

Question

On my page, I have a menu with currently six links. Two of them open a sub-menu (an ul-tag within the li-tag). Using jQuery, I'm trying to calculate the number of links (6) and then give each link a width of 1/6 of the page. Using this code, I can accomplish my goal, but only with normal links (with no submenu):

    $( document ).ready(function()
    {
       // Gets the number of elements with class yourClass
       var amount = $('.menulink').length;
       alert(amount) //EDIT: This outputs "6"
       // Calculates the width each element should get
       var width = 100/amount;
       width += "%";
       // Set the width on each element
       $( "nav ul li " ).css('width', width);   
    });

And my HTML looks like this:

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

I am aware that this is not necessary and that I could just set the width to 16.7% with 6 menulinks, but I want to understand why my code doesn't work. Can anyone please explain why it doesn't?

EDIT: This is how my CSS looks:

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

Answer 1

According to what you've said in the comments, it's not applying the width to the items with sub-menus.

Try this:

$( 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);
});