title: How to stop nested list from inheriting style from parent list?
body: <p>I want to add a nested list but I am having a problem with it inheriting from the parent list. I've followed this <a href="https://stackoverflow.com/questions/6897463/css-on-nested-list-avoid-styling-of-both-lists">question</a> and this <a href="https://stackoverflow.com/questions/9247525/my-nested-li-is-inheriting-the-styles-from-its-parent">question</a> but they haven't helped.</p>
  
  <p>How could I get rid of the red background in the nested list? </p>
  
  <p><a href="http://jsfiddle.net/wHztz/25/" rel="nofollow noreferrer">http://jsfiddle.net/wHztz/25/</a></p>
  
  <pre><code>&lt;div class="innerLeft"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;Fruit&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href=""&gt;Apples&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Vegetable&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  .innerLeft ul {
      width:199px;
      float:left;
      margin:0px;
      padding:0px 0 0 12px;
      list-style:none;
      min-height:10px;
  }
  .innerLeft ul li {
      background: red;
      padding:0px;
      margin:0px 0 10px 0;
      height:18px;
  }
  .innerLeft ul li ul {
      background: '';
  }
  .innerLeft ul li ul li {
      background: blue;
  }
  </code></pre>