How to separate styles in a nested list styling?

Have you tried CSS child-selectors?

ul { /* parent list styles here */ }
ul > li > ul { /* child list styles here */ }

The solutions given here will work, but too much typing. Due to how selectors work in CSS3, it may be simplified thusly,…

/* list styles */

/* ordered lists */
ol { list-style-type: decimal;}
ol ol { list-style-type: upper-alpha;}
ol ol ol {list-style-type: upper-roman;}
ol ol ol ol {list-style-type: lower-alpha;}
ol ol ol ol ol {list-style-type: lower-roman;}
ol ol ol ol ol ol {list-style-type: lower-greek;}


/* set colours here */
ol li { color: darkblue; }
ol ol li { color: orange; }
ol ol ol li { color: darkgoldenrod; }
ol ol ol ol li { color: green; }
ol ol ol ol ol li { color: blue; }
ol ol ol ol ol ol li  { color: indigo; }



/* unordered lists */
ul { list-style: disc outside ;}
ul ul { list-style: square outside ;}
ul ul ul {list-style: circle outside ;}
ul ul ul ul {list-style: disc outside ;}
ul ul ul ul ul {list-style: square outside ;}
ul ul ul ul ul ul {list-style: circle outside ;}


/* set colours here */
ul li { color: darkblue; }
ul ul li { color: orange; }
ul ul ul li { color: darkgoldenrod; }
ul ul ul ul li { color: green; }
ul ul ul ul ul li { color: blue; }
ul ul ul ul ul ul li { color: indigo; }

Throwing the “li”s between the “ol”s —and vice-versa— are redundant, and may be omitted.

Furthemore, since the list items will inherit the properties of the ordered/unordered list, the second set may be just as easily done with “ul” istead.

/* unordered lists */
ul { 
   list-style-type: circle;
   color: red;
   }
ul ul { 
   list-style-type: disc;
   color: orange;
   }
ul ul ul {
   list-style-type: square;
   color: darkgoldenrod;
   }

This is a generic answer, (since the question is very old, and I surmise that the specific use case has been settled).

ERRATUM: Made an error, regarding the colour values. Corrected.

Simply use the > direct/immediate descendant combinator, and an id to specify which li (or ul) elements you're targeting:

#accountNavigation { /* outer ul element */
}

#accountNavigation > li { /* outer ul element's children li */
}

#accountNavigation > li > ul { /* first 'inner' ul element */
}

#accountNavigation > li > ul > li { /* first 'inner' ul element's li children */
}

You can, of course, be more generic and simply use:

ul { /* targets all ul elements */
    /* general styles */
}
ul li { /* targets all li elements within a ul */
    /* general styles */
}
ul li ul { /* targets all ul elements within an li element, itself within a ul */
    /* overrule general 'outer' styles */
}
ul li ul li { /* targets all li elements within a ul element,
                 within an li element, itself within a ul...and so on */
    /* overrule general 'outer' styles */
}

Using the general approach:

<ul>
    <li>This should be green!</li>
    <li>This is also green...
        <ul>
            <li>But this is not, it's, um...blue!</li>
            <li>And so on...</li>
        </ul></li>
    <li>This is green too, just because.</li>
</ul>

The following CSS should demonstrate its use:

ul li {
    color: green; /* the 'general'/'default' settings */
    margin-left: 10%;
}

ul li ul li {
    color: blue; /* this overrides the 'general' color setting */
                 /* the margin is not overridden however */
}​

JS Fiddle demo.

References:

• CSS Selectors (Level 3), at the W3.org.