Applying CSS styling to only the first <li> in the root of a nested list

Question

i want to apply the CSS only first li but :first-child apply to all first child of every ul

here is my CODE

#menu-navigation li:first-child{
   color:red;
}​

When applied to this HTML:

<ul class="nav" id="menu-navigation">
    <li>Home</li>
    <li>About Us
        <ul>
            <li>Our Team</li>
        </ul>
    </li>
</ul>​

...both "Home" and "Our Team" turn red.

Answer 1

use the child selector:

#menu-navigation>li:first-child{
   color:red;
}​

For example: http://jsfiddle.net/w47LD/3/