html - CSS 高度属性和嵌套列表

Question

我正在尝试在 Joomla 菜单中设置一组嵌套的列表项，以便最外面的父母向下移动以为孩子腾出空间。列表项的高度也需要设置高度，因为菜单项是按钮。目前发生的情况是子项下方的父项水平推入子项的空间，以便它们重叠。这是我要实现的目标的简化示例：

<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>

这是我网站上一个页面的链接，该页面正好显示了这种情况：

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

CSS有什么办法可以在这个列表中正确计算高度，以便每个级别比前一个级别低40像素而没有任何级别重叠？我也尝试将位置属性更改为固定和相对，但这不起作用。

Answer 1

解决了。答案是使用行高，而不是高度：

<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>

Answer 2

您使用此样式代码

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