Question

I have this menu structure:
(the inner <ul> tag can be surrounded by a custom <div>, every other structural change is a lot more difficult because the code is generated from a dynamic module system, written in PHP)

<div id="menu">
    <div class="body-menu">
        <ul>
            <li class="current"><div class="body-menu">
                <a href="bla">Item1</a>
                <ul>
                    <li class="current"><div class="body-menu">
                        <a href="bla">Sub-Item 1</a>
                    </div></li>
                    <li class=""><div class="body-menu">
                        <a href="bla">Sub-Item 2</a>
                    </div></li>
                </ul>
            </div></li>
            <li class=""><div class="body-menu">
                <a href="bla">Item 2</a>
            </div></li>

        </ul>
    </div>
    <div class="menu-background"></div>
</div>

The goal is to display the inner <ul> after Item 1 on the left side as a sub menu instead of at the top with the other toplevel items..

Is there a way to do that without modifying the structure? Just with CSS or so?

---

UPDATE:

thanks for all the answers!

especially to besluitloos and Caelea, that’s exactly what I’m looking for.

Answer 1

The parent <li> containing the second <ul> should be positioned relative and the contained <ul> should be positioned absolute.

Sometihing like:

ul li { position: relative ;}
ul li ul {position: absolute; top: 0; left: 145px;} 

I wrote left: 145px but you can give any value you want to that, depending on how big you want your menu to be.

PS: Tip: don’t use the same “body-menu” class on those divs it should be different for the big container, and not only. And I don’t really think it’s necessary to have that div inside those < li >.