css & html child not affected by container dimensions

I have this part of code:

<ul>
    <li>First item</li>
    <li>second item
        <ul>
            <li>child</li>
            <li>child</li>
        </ul>
    </li>
</ul>

It is a menu on my webpage. It is printed like this by CMS. For now, menu looks like this:

item1 | item2 | item3 | item4
            childItem3 | childItem3 | childItem3

What i wanna do is style child items with CSS to start right in place where main menu starts, so it looks like this:

item1 | item2 | item3 | item4
childItem3 | childItem3 | childItem3

How can i achieve this?

@edit:

here is the CSS i use. I made this very simple and it works fine (I've had problem with 开发者_如何学Pythonplacing submenu under menu, but position:absolute repaired it)

#menu ul {
        position: relative;
}

#menu ul li {
    display: inline-block;
}

#menu ul li ul {
    position: absolute;
}

Without seeing your code, I would set the container of your outer ul to relative, then set your nested ul to position:absolute and give it a suitable top value to push it under the outer list.

EDIT: This is how you could change your CSS to achieve what you want:

ul { position: relative; }

ul li { float:left; }

ul li ul { position: absolute; display:none; }

ul li:hover ul { left:0px; top:20px; display:inline; }

Obviously this has been simplified as you example CSS was. Working example: http://jsfiddle.net/ZfLwD/