Twitter Bootstrap重叠嵌套李元素

Question

我想要显示一个和元素内的li元素的嵌套列表。但是嵌套元素是重叠的。我创建了一个jsFiddle来展示我的问题。你可以在这里观看http://jsfiddle.net/pcXaS/。有没有人有一个想法如何解决这个问题？我还测试了位置/显示器，但它也没有工作。

感谢您的帮助！

---

代码片断来重现问题：

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

您好，感谢您的小提琴，

这里的问题是，你的内在李与外李的高度相同。列表项Point2（65px高度）包含两个li，每个高度为65px（总计130px），导致重叠。

解决的办法是确保最外层列表项的高度大于其所有子li的总和。如果您想为父元素定义高度，您可以将其设置为像素/ em值，或者如果您希望缩小到父子元素的高度，可以将其缩小为子元素高度总和的大小。

下面是与父李的没有高度小提琴例如：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; 
} 

而且这里有一个与父李的设置为200像素高度：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; 
}