css - Twitter Bootstrap overlapping nested li elements -

I want to display the nested list of elements inside the well element but nested elements are overlapping. I have made JSFDial to display my problem. You can see it here. Does anyone have an idea to fix this problem? I also tested with status / display, but it does not work either.

Thank you for your help!

---

A code snippet to reproduce the problem:

HTML & lt; Div class = "well" & gt; & Lt; Ul class = "navpoint-sort" & gt; & Lt; Li & gt; Point 1 & lt; / Li & gt; & Lt; Li & gt; Point 2 & lt; Ul class = "navpoint-sort" & gt; & Lt; Li & gt; Point 2.1 & lt; / Li & gt; & Lt; Li & gt; Point 2.2 & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; Point 3 & lt; / Li & gt; & Lt; Li & gt; Point 4 & lt; / Li & gt; & Lt; Li & gt; Point 5 & lt; Ul class = "navpoint-sort" & gt; & Lt; Li & gt; Point 5.1 & lt; / Li & gt; & Lt; Li & gt; Point 5.2 & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;

CSS

  ul.navpoint-sort {status: relative; List-style-type: none; Margin: 0; Padding: 0; } Ul.navpoint-sort & gt; Lee (Status: Relative; Height: 65px; Margin: 0 to 5px 0; Padding: 0; Background color: # F9F9F9; Border: 1 px solid # DED8D8; Boundary-radius: 4px; Clean both; } Ul.navpoint-sort & gt; Li: hover {background color: # F5F5F5; }    
 
 
 Hello and thanks for Bela,  
 The problem here It is that your inner li has the same height as the outer li. The list item points 2 (65 px height), which is two 65px height (total 130px), which overlaps.  
 The fix is ​​to ensure that the outer list has a height in the list, it is more than all its children. You can set it as a pixel / AM value if you want a defined height for parental elements, or you can only remove the height of the parent's lea if you want it to be the sum of children's heights. Minimize the size. / P> 
 There is no height above the parent lei:  
  li (status: relative; Margin: 0 to 5px 0; Padding: 0; Background color: # F9F9F9; Border: 1 px solid # DED8D8; Boundary-radius: 4px; Clean both; } Ul.navpoint-sort2 & gt; Li {Height: 65px; }   
 And here parents have one with 200px height:  
  li {status: Relative; Margin: 0 to 5px 0; Padding: 0; Height: 200px; Background color: # F9F9F9; Border: 1 px solid # DED8D8; Boundary-radius: 4px; Clean both; } Ul.navpoint-sort2 & gt; Li {Height: 65px; }