html - HTML/CSS：嵌套列表需要在其他地方显示/使用母 div 而不是母元素来定位

Question

我有一个用于导航的嵌套列表

<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 进行定位，这样我就可以将它放在页面的右侧。这甚至可能吗？

有什么想法吗？

Answer 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; }