CODEWITHSUNDEEP
htmlcsshtml-lists
DarenW
DarenW

Reputation: 16906

Why are UL lists messed up by CSS height attribute?

I'm puzzled by this. In a nested list, by setting the height of LI elements the list, the items overlap. What is the explanation for this, and what is the proper way apply height without overlap effect? (I want height, not padding or margins.) the ugly result

.aaa {background:#ccf;}
.bbb {background:#fcc;}
.bbb li {height:25px;}

<ul class="aaa">
  <li>one one one</li>
  <li>two, too
     <ul>
       <li>alpha</li>
       <li>beta</li>
       <li>gamma</li>
     </ul>
     </li>
  <li>three</li>
  <li>here comes four</li>
</ul>
<ul class="bbb">
  <li>one one one</li>
  <li>two, too
     <ul>
       <li>alpha</li>
       <li>beta</li>
       <li>gamma</li>
     </ul>
     </li>
  <li>three</li>
  <li>here comes four</li>
</ul>

Upvotes: 1

Views: 690

Answers (2)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

<li>two, too
     <ul>   <-- this list is part of your LI
       <li>alpha</li>
       <li>beta</li>
       <li>gamma</li>
     </ul>
     </li>

Since you have a list nested in a list, the inner list overflows because it is bigger than 25px.

Use min-height instead of height.

Upvotes: 3

megaSteve4
megaSteve4

Reputation: 1760

The second tier li is inheriting the CSS from the top tier li

You need come CSS like 

ul li ul li {/*style to hit the bottom tier*/}

This looks like you are making a menu - Tuts like this (http://www.devinrolsen.com/pure-css-vertical-menu/) could advise you for better code but Padding and margin are recognised techniques to achieve what you apparently want

Upvotes: 0

Related Questions