March 8, 2012
Background image of a li under the background image of the ul
Question by Jarco
How can you do this in css?
I want the background image of the li’s to slide under the background image of the ul where they are in.
I tried to do it with z-index but it didn’t work.
li{
list-style:none;
background-image:url("2.png");
z-index:-10;
position:relative;
}
ul{
background-image:url("1.png");
background-repeat: no-repeat;
z-index:100;
position:relative;
}
Is this possible? And how is it done if it is.
update: Picture explaining what i mean
Answer by Starx
I like the idea so much I just made it for you jarco. It seems it is not as exact as you want but, it is pretty similar.
Demo
A little div to show the bar, and script to bring it up and down
$("ul").mouseenter(function() {
$("#bar").animate({
height: $("ul").height()
});
}).mouseleave( function() {
$("#bar").animate({
height: 20
});
});
Update with the heights
