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.