Question

Javascript

$("#col").hover(function (){
   $("#cool").toggle();
});

<div>
<ul id="col">
<li>Sports</li>
<ul id="cool" style="padding-left:0px;display:none">
<li>Tennis</li>
<li>Basketball</li>
</ul>
</ul>
</div>
<div style="position:fixed;z-index:-1">
<strong>Wanna be?</strong>
</div>

I was trying to create a drowdown menu list.Its working fine as i expected, except one case.When I hover my mouse over the sports word, Tennis and basketball seems to appear but the word wanna be? is pushed down but I want the position to be fixed. I used position-fixed and also z-index as -1 , I dont know if they are used these way but i found them on google

But still the word ‘wanna be?’ is going down on hover effect but I want it to be fixed and it should be behind the tennis and basketball menu when hover takes effect.

Please help me with these. any help is greatly appreciated. Thanks

Answer 1

Just add the position: absolute; to “cool” UL

<div>
<ul id="col">
<li>Sports</li>
<ul id="cool" style="position: absolute;padding-left:0px;display:none">
<li>Tennis</li>
<li>Basketball</li>
</ul>
</ul>
<div style=" z-index:-1">
<strong>Wanna be?</strong>
</div>
</div>

check this demo