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.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

Solution 2:

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

Solution 3:

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;
}

Solution 4:

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.