title: How to separate styles in a nested list styling?
body: <p>I have a list and list also has list in it.<br>
  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.</p>
  
  <p>HTML file:</p>
  
  <pre><code>&lt;ul id="accountNavigation"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Something&lt;/a&gt;&lt;/li&gt;                    
    &lt;li id="userNavigation"&gt;
      &lt;img src="https://si0.twimg.com/profile_images/135460415/UAB_dragon_head_normal.png" alt=""/&gt;
      &lt;a href="#"&gt;Username&lt;/a&gt;
      &lt;div class="showme"&gt;
        &lt;ul id="userNavigationSubMenu"&gt;
          &lt;li&gt;test&lt;/li&gt;
          &lt;li&gt;test&lt;/li&gt;
          &lt;li&gt;test&lt;/li&gt;
          &lt;li&gt;test&lt;/li&gt;
          &lt;li&gt;test&lt;/li&gt;
          &lt;li&gt;test&lt;/li&gt;
          &lt;li&gt;test&lt;/li&gt;
  
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS file:</p>
  
  <pre><code>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;}
  </code></pre>
  
  <p>This is <a href="http://jsfiddle.net/BDaTU/" rel="noreferrer">fiddle</a>.</p>