下拉菜单总是显示在h1下方?

我有一个下拉菜单,虽然我已经把它的每个可能的元素的z-index设置为999,但下拉菜单总是显示在h1下面。

这是在所有浏览器。

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

我试过在所有的 <ul>'s <li>'s and <a>'s

display:block; 和 float: left; 在适当的情况下 ul li ul 设置为 display: none 设置为 display: block; ul li:hover

但是,当子菜单与 <h1> 菜单在它下面。

菜单在菜单上方 <div id="article"> 背景色,但低于 <h1>