dropdown menu always shows below h1?

Question

I have a dropdown menu and although i have set z-index to 999 on every possible element of it, the dropdown always shows below the h1.

Why would this happen?

This is in all browsers.

<ul>
    <li><a>Menu item</a>
        <ul>
            <li><a>Sub item 1</a></li>
            <li><a>Sub item 2</a></li>
            <li><a>Sub item 3</a></li>
            <li><a>Sub item 4</a></li>
        </ul>
    </li>
</ul>

<div id="article"><h1>Test title</h1></div>

The above is the html used I have tried setting a z-index of 999 on all <ul>'s <li>'s and <a>'s

The sample css is the basic display:block; and float: left; where appropriate ul li ul is set as display: none and is set as display: block; upon ul li:hover

however when the sub menu overlaps the <h1> the menu goes under it.

The menu is above the <div id="article"> background color but below the text of the <h1>

Answer 1

The z-index:999 must be in the menu, not in all others elements.

Answer 2

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Also, additionaly to what Topera wrote, give bigger z-index value to menu's div or ul than h1. The best would be if we had some code.