Question

I have a nested list for a navigation

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

Now i want to display the top level (item1, 2 & 3) at the top right of the page in a horizontal line. The submenu should be displayed as a list on the left side of the page.
I can not change the HTML aparently.

So how do i get the sublevel out of there?
Using position:absolute it will use the upper level for orientation wich will change depending on the width of the main level.
I need it to use the mother div for orientation so i can place it on the right side of the page.
Is this even possible?

Any ideas anyone?

Answer 1

Are you looking for this?

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