0

最も外側の親が下に移動して子のためのスペースを空けるように、ネストされたリスト項目のセットを 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 ピクセル低く、レベルが重ならないようにする方法はありますか? 位置属性を固定および相対にも変更しようとしましたが、これは機能しませんでした。

4

2 に答える 2

3

解決しました。答えは、高さではなく、行の高さを使用することです:

<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-17T08:32:01.980 に答える
0

このスタイルコードを使用します

ul > li:hover ul{
  height:40px;
  margin:0;
  padding:0;
}
于 2012-10-17T06:28:59.430 に答える