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 CSS 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: And here parents have one with 200px height:
& 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;
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; }
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; }
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; }
No comments:
Post a Comment