Twitter Bootstrap, перекрывающий вложенные элементы li

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

Здравствуйте и спасибо за скрипку,

Проблема в том, что ваши внутренние листы имеют ту же высоту, что и внешние li. Элемент списка Point2 (высота 65 пикселей) содержит два li, каждый из которых имеет 65 пикселей в высоту (всего 130 пикселей), что вызывает перекрытие.

Исправление состоит в том, чтобы убедиться, что элемент самого внешнего списка имеет высоту, которая больше, чем сумма всех ее дочерних элементов. Вы можете установить это как значение pixel/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; 
} 

И вот один с множеством родительского Lī на 200px высоте: 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; 
}