In CSS, when I have lists within lists, I can't override the parent list style

Question

If I have a <ul> list that has the rule "list-style-type: none" (and the rule "background-image: url(whatever.jpg)" for the <li> items), I can't seem to override those rules if I have a <ul> list as a child of one of the <li> items. I want to make the child list have the classic style "list-style-type: disc", but the browser seems to ignore that, so that I have the same background image of the parent list items used for the child list items.

Here's the HTML:

<ul class="blueArrow">    
    <li>
        <ul>
            <li>...</li>   
            ...
        </ul>
     </li>
</ul>

And the CSS:

ul.parentClass {
list-style-type: none;
margin: 0;
padding: 0;
margin-left: 1.076923076923077em;
}

ul.blueArrow li {
    padding-left: 17px;
    line-height: 22px;
    vertical-align: middle;
    position: relative;
    clear: both;
    display: block;
    height: 22px;
    background-color: white;
background: transparent url(../images/arrowblue.png) no-repeat scroll 0 3px;
    color: #086189;
    position: relative;
}

ul.blueArrow li ul {
list-style-type: disc;
background-image: none;
}

Answer 1

You could do:

<ul class="blueArrow">    
    <li>
        <ul>
            <li>...</li>   
            ...
        </ul>
     </li>
</ul>

ul.blueArrow
{
    list-style-type: none;
    background-image: url(whatever.jpg);
}
ul.blueArrow li ul
{
    list-style-type: disc !important;
    background-image: none  !important;
}

Answer 2

You should use

ul.blueArrow li ul {
    list-style-type: disc;
}

ul.blueArrow li li {
    background-image: none;
}

since your CSS will not overwrite the li's style.

Answer 3

Remember that the most descriptive selector takes precedence.

This will work:

ul.blueArrow li ul, ul.blueArrow li ul li {
list-style-type: disc;
background-image: none;
}

Here is the W3 guide on CSS Selectors: http://www.w3.org/TR/CSS2/selector.html

Answer 4

For the outer LI, define CSS as:

ul.blueArrow > li {
  :
  background: transparent url(../images/arrowblue.png) no-repeat scroll 0 3px;
  :
}

This will apply to only those LI which are direct children of <ul class="blueArrow">. Then you won't need to add anything like ul.blueArrow li ul

ref: http://www.w3schools.com/css/css_reference.asp