0

ナビゲーション用のネストされたリストがあります

<ul>
  <li>item 1</li>
  <li>item 2
    <ul>
      <li>item 2.1</li>
      <li>item 2.2</li>
      <li>item 2.3</li>
    </ul>
  <li>item 3</li>
</ul>

ここで、ページの右上にあるトップレベル（item1、2、3）を横線で表示したいと思います。サブメニューは、ページの左側にリストとして表示されます。どうやらHTMLを変更できません。

では、どうすればサブレベルをそこから出すことができますか？position：absoluteを使用すると、メインレベルの幅に応じて変化する方向に上位レベルが使用されます。ページの右側に配置できるように、オリエンテーションにマザーdivを使用する必要があります。これも可能ですか？

誰かアイデアはありますか？

4

1 に答える 1

1

これを探していますか？

デモを見る

CSS:

ul { float: right; }
ul li { float: left; padding: 0 20px;  }
ul li ul { position: absolute; left: 0px; top: 0px; display:none; }
ul li ul li { float: none; }
ul li:hover ul { display: block; }
于 2012-08-07T09:28:10.500 に答える