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.

can you add a fiddle or illustrate more or add a screeshot of problam — Sahil Popli
– Sahil Popli, Commented Oct 17, 2012 at 5:56
I just edited my post adding a link to a page showing what is happening: procadsys.worldnz.co.nz/test — Terry Rozmus
– Terry Rozmus, Commented Oct 17, 2012 at 7:03
just remove heights from everywhere ? Its impossible to understand you really, even if you need to have buttons, its not A MUST to have heights — Roman
– Roman, Commented Oct 17, 2012 at 7:25
Yes, I know I can remove heights, but my client wants the buttons to be a particular height. If this is not possible with CSS then I will have to try another way like JS or whatever, but surely something like this can be done with CSS. — Terry Rozmus
– Terry Rozmus, Commented Oct 17, 2012 at 8:04

isherwood · Accepted Answer · 2024-06-07 16:43:04Z

3

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>

edited Jun 7, 2024 at 16:43

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Oct 17, 2012 at 8:32

Terry Rozmus

3963 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saeed · Accepted Answer · 2012-10-17 06:28:59Z

0

You use this style code

ul > li:hover ul{
  height:40px;
  margin:0;
  padding:0;
}

answered Oct 17, 2012 at 6:28

Saeed

3,8653 gold badges28 silver badges43 bronze badges

1 Comment

Terry Rozmus Over a year ago

I just tried this, but it did not work. Besides which I do not want the list to expand on mouse-over. I want to see the whole list without part of it overlapping. I'll try to add a screen-shot of the problem now to show the problem

Collectives™ on Stack Overflow

CSS height property and nested list

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related