Question

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?

Answer 1

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