In Css, When I Have Lists Within Lists, I Can't Override The Parent List Style

If I have a

list that has the rule 'list-style-type: none' (and the rule 'background-image: url(whatever.jpg)' for the
• items), I can't seem to override those

Solution 1:

Remember that the most descriptive selector takes precedence.

This will work:

ul.blueArrowliul, ul.blueArrowliulli {
list-style-type: disc;
background-image: none;
}

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

Solution 2:

For the outer LI, define CSS as:

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

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

Solution 3:

You could do:

<ulclass="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;
}

Solution 4:

You should use

ul.blueArrowliul {
    list-style-type: disc;
}

ul.blueArrowlili {
    background-image: none;
}

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