如何定位嵌套的 ul 元素相对于和外部 div 元素而不是它们的父元素答案

【问题标题】：How to position nested ul elements relative to and out side dive element instead of to theier parent elemnts如何定位嵌套的 ul 元素相对于和外部 div 元素而不是它们的父元素
【发布时间】：2011-05-06 10:51:29
【问题描述】：

我有一个 DIV 元素，其中包含嵌套的多级 UL 元素。所有 UL 元素绝对定位，DIV 元素相对定位。

现在我希望所有子 UL 元素都相对于 DIV 元素而不是它们的父元素定位。

示例代码如下：

<div id="menu-container">
<ul>
<li><a href="#">Level 1.1</a>
  <ul>
    <li><a href="#">Level 1.1.1</a>
      <ul>
        <li><a href="#">Level 1.1.1.1</a></li>
        <li><a href="#">Level 1.1.1.2</a></li>
      </ul>
    </li>
    <li><a href="#">Level 1.1.2</a></li>
  </ul>
</li>
<li><a href="#">Level 1.2</a>
  <ul>
    <li><a href="#">Level 1.2.1</a></li>
    <li><a href="#">Level 1.2.2</a>
      <ul>
        <li><a href="#">Level 1.2.2.1</a>
          <ul>
            <li><a href="#">Level 1.2.2.1.1</a></li>
          </ul>
        </li>
        <li><a href="#">Level 1.2.2.2</a></li>
        <li><a href="#">Level 1.2.2.3</a></li>
      </ul>
    </li>
    <li><a href="#">Level 1.2.3</a></li>
  </ul>
</li>
<li><a href="#">Level 1.3</a>
  <ul>
    <li><a href="#">Level 1.3.1</a>
      <ul>
        <li><a href="#">Level 1.3.1.1</a></li>
        <li><a href="#">Level 1.3.1.2</a></li>
      </ul>
    </li>
  </ul>
</li>
<li><a href="#">Level 1.4</a>
  <ul>
    <li><a href="#">Level 1.4.1</a></li>
    <li><a href="#">Level 1.4.2</a></li>
    <li><a href="#">Level 1.4.3</a></li>
    <li><a href="#">Level 1.4.4</a></li>
    <li><a href="#">Level 1.4.5</a></li>
  </ul>
</li>

【问题讨论】：

您能添加您当前的 CSS 吗？此外，如果您创建了jsFiddle test case，它真的会有所帮助。

标签： html css

【解决方案1】：

您将无法做到，因为子 UL 元素将始终寻找具有某种定位的最近父元素，因此 UL 是具有位置的先前 UL 的子元素。

我的直觉告诉我，如果你想选择纯 CSS 的菜单（我认为这有点过头了），你可以检查一下 Stu Nicholls 是否有可以激发你灵感的东西，你可以检查他的工作在：http://cssplay.co.uk/

【讨论】：