How to position nested ul elements relative to and out side dive element instead of to theier parent elemnts

I have a DIV element that contains multi level UL elements nested. All UL elements absolute positioned and DIV element positioned relative.

Now I want all child UL elements to be positioned relative to DIV element not to their parent elements.

Here is the example code:

<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>&开发者_运维百科lt;a href="#">Level 1.4.4</a></li>
    <li><a href="#">Level 1.4.5</a></li>
  </ul>
</li>

You won't be able to, since the children UL elements will always look for the nearest parent that has some sort of positioning, the UL is a child to a prior UL that has a position.

My gut is telling me that if you want to go for a menu that is in PURE CSS (which is a bit overkill in my opinion) you could check if Stu Nicholls has something that could inspire you, you can check his work at: http://cssplay.co.uk/