Z-index vs Accessibility

Question

Here's a simplification of my code that I'm having problems with, in regards to layering.

<ul id="main_menu">
    <li>Option 1
        <ul id="submenu1">
            <li>link</li>
            <li>link</li>                
            <li>link</li>
        </ul>
    </li>
    <li>Option 2
        <ul id="submenu2">
            <li>link</li>
            <li>link</li>                
            <li>link</li>
        </ul>
    </li>
</ul>

My issue is that submenu2 seems to be above Option 1. I have tried to give them appropriate z-indexes, but they don't seem to work... I'm assuming because submenu2 is a child of Option 2, and has no relevance to Option 1.

Any idea of any work around that would help resolve my issue?

I'm using large graphics for most of these links, so the overlapping is quite obvious.

Answer 1

z-index only works with absolutely positioned elements. And as my commentators point out, relative and fixed positioning as well. My somewhat hurried point was that the element has to be taken out of the regular document flow.

Answer 2

Hard to tell without seeing the CSS, but for z-index to work properly, the element must be positioned either absolutely, relatively, or fixed.