Is it possible to make an element to be always on top with jQuery? I could use z-index in CSS, but in Internet explorer 7 it works only with position:relative; and the position must be absolute. So maybe there is something what I can do with jQuery?
Now my jQuery file looks like:
$(document).ready(function(){
$('#mainmenu li.item').hover(function(){
$('.sub',this).show();
},
function(){
$('.sub',this).hide();
});
});
CSS:
#mainmenu li .sub{
text-transform:lowercase;
display: none;
position: absolute;
float: left;
top: 31px;
left: 0px;
background:url("images/sub-menu-bg.png") repeat-x;
z-index:6;
padding-left:15px;
padding-bottom:15px;
padding-top:15px;
width: 280px;
color: #3e4f77;
z-index: 4;
}
There are many jQuery scripts that fix the z-index issue in IE7
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/