Overlaping that cant be fixed with

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?

could you post this on http://jsfiddle.net ? – Arnaud Le Blanc Aug 28 '11 at 18:48 — Arnaud Le Blanc, Aug 28 '11 at 18:48
Could you include your stylesheet? – fluffy Aug 28 '11 at 18:58 — fluffy, Aug 28 '11 at 18:58

score 1 · Answer 1 · answered Aug 28 '11 at 19:05

1

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.

answered Aug 28 '11 at 19:05

ShankarSangoli

69,612
13
93
124

score 1 · Accepted Answer · answered Aug 28 '11 at 19:21

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

answered Aug 28 '11 at 19:21

toopay

1,635
11
18

position relative in '#header' with a proper z-index in 'submenu-list' made the deal! :) thanks – nonouco Aug 28 '11 at 22:36

Overlaping that cant be fixed with

2 Answers2