How can I position an inner tag at different position?

问题

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.

回答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 >.

回答2:

Probably you want to do something like hiding the sub-menu and make it pop up or show up when the mouse is hovering. Take a look at http://cssmenumaker.com/builder/42231 for an example.

回答3:

.body-menu > ul > li {
 position:relative;
 float:left;
 padding-bottom: 1em;
}
.body-menu ul ul {
 position:absolute;
 left:0;
 top:1.3em;
 display:none;
}
.body-menu > ul > li:hover > ul {
 display:block;
}

Is that what you're looking for?

EDIT: I'm sorry, IE doesn't play nice with inline-block. So you'll have to change that to 'inline'. Then you can leave out the bottom padding because that doesn't work on an inline element. Except if you float the element. edited the code above to work with float.

edit 2: typo.

来源：https://stackoverflow.com/questions/12458787/how-can-i-position-an-inner-tag-at-different-position