CSS height property and nested list

Question

I am trying to set a nested set of list items in a Joomla menu so that the outermost parents move down to make room for the children. The height of the list items also needs to be a set height because the menu items are buttons. At the moment what happens is that the parent items below a child item horizontally get pushed into the space of the child item so that they overlap. Here is a simplified example of what I am trying to achieve:

<ul>
     <li style="height: 40px;">Parent Item 1
     <ul>
          <li style="height: 40px;">Child item of 1</li>
     </ul>
     </li>
     <li style="height: 40px;">Parent Item 1</li>
</ul>

Here is a link to a page on my site showing exactly this situation:

http://procadsys.worldnz.co.nz/test

Is there any way with CSS to have the heights properly calculated down this list so that each level is 40 pixels below the previous one without any levels overlapping? I've tried changing the position attribute to fixed and relative as well, but this didn't work.

Answer 1

The answer is to use line-height, not height:

<ul>
     <li style="line-height: 40px;">Parent Item 1
     <ul>
          <li style="line-height: 40px;">Child item of 1</li>
     </ul>
     </li>
     <li style="line-height: 40px;">Parent Item 1</li>
</ul>