set z-index for show list on over the <p> text

Question

I want to set list z-index .
when mouse over list show.
and this list show above <p> text
here is simple html and css

<style>
ul li{
    display:none;
}
ul:hover li{
    display:block;
    z-index:-1;
}
</style>

<ul><h3>This is LIST</h3>
<li>back</li>
<li>forword</li>
<li>click</li>
</ul>
<p>list show above this text.</p>

with this CSS when mouse over the this is list then its wrapped.
but I want when mouse over at This is LIST then show there list over the <p> text. here is jsfiddle how its possible.

Answer 1

Z-index仅适用于位置为“相对”，“固定”或“绝对”而不是“静态”（默认）的元素。

Answer 2

Sounds like what you want is to "preserve" the place for list items even when they are hidden.

For this purpose, use visibility CSS attribute instead of display :

ul li {
    visibility: hidden;
}

ul:hover li {
    visibility: visible;
}

Updated fiddle .