CODEWITHSUNDEEP
htmlcss
웃웃웃웃웃
웃웃웃웃웃

Reputation: 362

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

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.

Upvotes: 2

Views: 130

Answers (2)

Shadow Wizard
Shadow Wizard

Reputation: 66388

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.

Upvotes: 0

Mitya
Mitya

Reputation: 34556

Z-index applies only to elements that have position 'relative', 'fixed' or 'absolute', not 'static' (which is the default).

Upvotes: 3

Related Questions