Here is what I need a better understanding of...

Code:
<ul id="nav">
     <li>home
           <ul id="subNav>
                <li></li>
                <li></li>
           </ul>
     </li>
     <li>Products</li>
     <li>Contact</li>
</ul>
if I setup my CSS as such:

#nav li{width=200px;}

that will also set the subNav li's to a width of 200px...ok makes sense.

But if I explicitly call out the subNav li as such:

#subNav li{width=100px;}...the subNav li still takes the property of the #nav li.

Why is #nav li taking precedence over #subNav li? This is what I'm trying to understand. Thanks