The jQuery css editing method does not apply to nav ul li with ul in them

On my page I have a menu with 6 links. Two of them open a submenu (ul-tag inside the li tag). Using jQuery, I am trying to calculate the number of links (6) and then give each link 1/6 page wide. Using this code, I can complete my task, but only with normal links (without a 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 know that this is not necessary and that I can just set the width to 16.7% with 6 manipulations, but I want to understand why my code does not work. Can someone explain why this is not so?

EDIT: this is what my CSS looks like:

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