Overlaping that cant be fixed with

I have a this:

<div id="header">
    <ul id="menu-li">
        <li class="menu-li with-sublist">
            <a class="left" href="#">A</a>
            <ul class="submenu-list">
                <li><a href="#">A1</a></li>
                <li><a href="#">A2</a></li>
                <li><a href="#">A3</a></li>
            </ul>    
        </li>
        <li class="menu-li"><a class="middle" href="#">B</a></li>
        <li class="menu-li"><a class="middle" href="#">C</a></li>
        <li class="menu-li"><a class="right" href="#">D</a></li>
        <li class="clear"><!-- --></li>
    </ul>
</div>

<div id="main-content">
<!-- jquery cycle and more stuff here -->
<开发者_如何转开发;/div>

The .menu-li is a horizontal list, li elements have float:left. So the .submenu-list populates vertically and overlaps on the #main-content div which contains a jquery cycle slidshow. The problem is that .submenu-list appears behind the #main-content - obviously I would like it to be displayed over it.

I tried a lot of z-index experiments but had no luck. I tend to suspect something else is wrong.

Any ideas out there?

If you ever want to use z-index dont forget to include position either to absolute or relative (and you can't use float directly in that element, but you can put another element on the top of this element, eg : http://jsfiddle.net/toopay/xLk8a/)

In this case z-index will not work because the ul.submenu-list element is contrained by the header element height. You will have to use position absolute and then set the top and left properties of the element dynamically based on the li position.