Как остановить вложенный список, перекрывающий родительский список?

Question

Смотрите здесь: http://jsfiddle.net/wHztz/67/

В этом примере цвета являются заполнители для фоновых изображений, я заметил, что вложенный список перестает накладываться друг на друга display:block удаляется из .innerLeft ul li a, но затем фоновые изображения не будет отображен правильно.

У меня нет большого опыта работы с CSS. Есть ли способ обойти это? Благодаря!

HTML:

<div class="innerLeft"> 
    <ul> 
     <li><a href="">Fruit</a></li> 
     <li> 
      <ul> 
       <li><a href="">Apples</a></li> 
       <li><a href="">Apples</a></li> 
       <li><a href="">Apples</a></li> 
       <li><a href="">Apples</a></li> 
       <li><a href="">Apples</a></li> 
       <li><a href="">Apples</a></li> 
       <li><a href="">Apples</a></li> 
       <li><a href="">Apples</a></li> 
      </ul> 
     </li> 
     <li><a href="">Vegetable</a></li> 
    </ul> 
</div> 

CSS:

.innerLeft ul { 
    width:199px; 
    float:left; 
    margin:0px; 
    padding:0px 0 0 12px; 
    list-style:none; 
    min-height:10px; 
} 
.innerLeft ul li{ 
    padding:0px; 
    margin:0px 0 10px 0; 
    height:18px; 
} 
.innerLeft ul li a{ 
    background: red; 
    display:block; 
} 
.innerLeft ul li ul li a{ 
    background: blue; 
} 

Answer 1

.innerLeft ul li { 
    clear: left; /* Added */ 
    padding:0px; 
    margin:0px 0 10px 0; 
    height:18px; 
} 

http://jsfiddle.net/wHztz/70/

Answer 2

использование display:inline-block; вместо

demo

.innerLeft ul li a{ 
    background: red; 
    display:inline-block; 
} 

Сво происходит потому, что вы применили CSS к ul li a и не ul li ul :)