CSS drop down menue using absolute positioning with a left:auto position

So I have your basic HTML menu structure:

<div id="page">

    <h1>Home</h1>
    <ul id="nav">
      <li><a href="http://example.com/">Home</a>
        <ul>
            <li><a href="http://example.com/">Nested Item</a></li>
            <li><a href="http://example.com/">Nested Item</a></li>
        </ul>
      </li>
      <li><a href="http://example.com/">About Us</a>
        <ul>
            <li><a href="http://example.com/">Nested Item</a></li>
            <li><a href="http://example.com/">Nested Item</a></li>
        </ul>
      </li>
      <li><a href="http://example.com/">Our Products</a>
        <ul>
            <li><a href="http://example.com/">Nested Item</a></li>
            <li><a href="http://example.com/">Nested Item</a></li>
        </ul>
      </li>
      <li><a href="http://example.com/">Contact Us</a>
        <ul>
            <li><a href="http://example.com/">Nested Item</a></li>
            <li><a href="http://example.com/">Nested Item</a></li>
        </ul>
      </li>
    </ul>

    <h2>Stuff</h2>
    <p>
    Some text</p>
    <p>
    Some text.</p>

</div>

Here is the menu css:

#nav, #nav ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

#nav a{
    display: block;
    border:1px solid cyan;
}

#nav li {
    border:1px solid;
    float: left;
}

#nav li ul {
/* note that this method hides the sub-items but they remain available to screen readers. this is important! you should never use display: none; as that removes the sub-items entirely. */
    position:absolute;
    width: 10em;
    left: -999em;
}

 #nav li:hover ul {
    left: auto;
}

My question is about the last CSS rule:

 #nav li:hover ul {
        left: auto;
    }

How does the "left:auto" bring the negative position of "left:-999em" back to normal and make a perfect drop down?

Out put example.