Twitter Bootstrap overlapping nested li elements

Question

I want to display a nested list of li elements inside a well element. But the nested elements are overlapping. I've created a jsFiddle to demonstrate my problem. You can watch it here http://jsfiddle.net/pcXaS/ . Has anyone an idea how to fix this problem? I also tested around with position / display but it doens't work either.

Thanks for your help!

---

A code snippet to reproduce the problem:

HTML

<div class="well">
    <ul class="navpoint-sort">
        <li>Point 1</li>
        <li>Point 2
            <ul class="navpoint-sort">
                <li>Point 2.1</li>
                <li>Point 2.2</li>
            </ul>
        </li>
        <li>Point 3</li>
        <li>Point 4</li>
        <li>Point 5
            <ul class="navpoint-sort">
                <li>Point 5.1</li>
                <li>Point 5.2</li>
            </ul>
        </li>
    </ul>
</div>

CSS

ul.navpoint-sort {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.navpoint-sort > li {  
    position: relative;
    height: 65px;
    margin: 0 0 5px 0;
    padding: 0;
    background-color: #f9f9f9;
    border: 1px solid #DED8D8;
    border-radius: 4px;
    clear: both;
}
ul.navpoint-sort > li:hover {
    background-color: #F5F5F5;
}

Answer 1

Hello and thanks for the fiddle,

The problem here is that your inner li's are the same height as the outer li's. The list item Point2 (65px height) contains two li's that are each 65px in height (total of 130px), causing the overlap.

The fix is to make sure that the outer-most list item has a height that is greater than the sum of all of it's child li's. You can set this as a pixel/em value if you want a defined height for the parent elements, or you can just remove the height of the parent li's if you want it to shrink to the size of the sum of it's children's heights.

Here's a fiddle example with no height on the parent li's: http://jsfiddle.net/HdZ7S/5/

li {  
    position: relative;
    margin: 0 0 5px 0;
    padding: 0;
    background-color: #f9f9f9;
    border: 1px solid #DED8D8;
    border-radius: 4px;
    clear: both;
}
ul.navpoint-sort2 > li {  
    height: 65px;
}

And here's one with the parent li's set to 200px height: http://jsfiddle.net/9Up2V/3/

li {  
    position: relative;
    margin: 0 0 5px 0;
    padding: 0;
    height:200px;
    background-color: #f9f9f9;
    border: 1px solid #DED8D8;
    border-radius: 4px;
    clear: both;
}
ul.navpoint-sort2 > li {  
    height: 65px;
}