CODEWITHSUNDEEP
htmlcss
Jonathan
Jonathan

Reputation: 3024

How to stop nested list overlapping parent list?

See here: http://jsfiddle.net/wHztz/67/

In this example the colors are placeholders for background images, I noticed the nested list stops overlapping when the display:block is removed from .innerLeft ul li a but then the background images wont show correctly.

I don't have much experience with CSS. Is there a way around this? Thanks!

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

Upvotes: 2

Views: 884

Answers (2)

Adrift
Adrift

Reputation: 59779

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

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

Upvotes: 3

user1533868
user1533868

Reputation:

use display:inline-block; instead

demo 

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

Its happening because you have applied css to ul li a and not ul li ul :)

Upvotes: 0

Related Questions