CSS高度属性和嵌套列表

我想在Joomla菜单中设置一个嵌套的列表项目集，以便最外面的父母向下移动以腾出空间给儿童。由于菜单项是按钮，因此列表项的高度也需要设置为高度。目前发生的情况是，子项下方的父项水平地被推入子项的空间，因此它们重叠。这里是什么，我想实现一个简单的例子：CSS高度属性和嵌套列表

<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个像素，没有任何级别重叠？我试过将位置属性改为固定和相对，但是这不起作用。

来源

2012-10-17 Terry Rozmus

可以添加一个小提琴或说明更多或添加problam –

的screeshot我刚编辑我的帖子添加一个链接到一个网页显示正在发生的事情：HTTP ：//procadsys.worldnz.co.nz/test –

只是从各地删除高地？它不可能真正理解你，即使你需要有按钮，它不是必须有高度 – RomanTheGreat

解决它。答案是使用行高，不高：

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

来源

2012-10-17 08:32:01

感谢您节省我的时间 – swaechter

您可以使用此代码风格

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

来源

2012-10-17 06:28:59

我刚试过这个，但没有奏效。除此之外，我不希望列表在鼠标悬停时展开。我希望看到整个列表中没有重叠的部分。我会尝试添加问题的屏幕截图以显示问题 –

CSS高度属性和嵌套列表

回答

相关问题