HTML/CSS : nested list needs to be displayed elsewhere/using mother div instead of mother element for position orientation

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

你在找这个吗？

SEE DEMO

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