Html 如何停止嵌套列表与父列表重叠？

请看这里：

在本例中，颜色是背景图像的占位符，我注意到当从

中删除
display:block
时，嵌套列表停止重叠。innerLeft ul LIA

，但是背景图像无法正确显示

我对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>

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

---

使用

显示：内联块取而代之


这是因为您将css应用于
ul li a
，而不是
ul li-ul
：）


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

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