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高度屬性和嵌套列表

回答

相關問題