How to separate styles in a nested list styling?

Question

I have a list and list also has list in it.
I set styles on parent list but I want different styles for parent and child list but they are mixed somehow I can't separate them.

HTML file:

<ul id="accountNavigation">
  <li><a href="#">Something</a></li>                    
  <li id="userNavigation">
    <img src="https://si0.twimg.com/profile_images/135460415/UAB_dragon_head_normal.png" alt=""/>
    <a href="#">Username</a>
    <div class="showme">
      <ul id="userNavigationSubMenu">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>

      </ul>
    </div>
  </li>
</ul>

CSS file:

body{background:#ff0000;}
#accountNavigation{ list-style: none;float: right;height: 44px;}
#accountNavigation li{ float: left;color: #fff;height: 44px;}
#accountNavigation li:hover{ background: #ddd;cursor: pointer;}
#accountNavigation li a{ text-decoration: none;color: #fff;line-height: 44px;font-weight: bold;font-size: 13px;height: 44px;padding: 15px 27px 0 14px;outline: none;}
#accountNavigation li img{ position: absolute;top: 12px;left: 10px;width: 22px;height: 22px;}
#userNavigation{position: relative;}
#userNavigation a {padding-left: 38px !important;}

#userNavigation{}
#userNavigation:hover{}
#userNavigation:hover .showme{display: inline;}
.showme
{
  display: none;
  width: 140px;
  height: 200px;
  background: #f5f5f5;
  margin: 0px auto;
  padding: 10px 5px 0px 5px;
  border: 1px solid #ddd;
  border-top: none;
  z-index: 10;
  position: absolute;
  right:0;
  top: auto;

}
#userNavigation ul { list-style: none;}

This is fiddle.

Answer 1

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.