Фоновое изображение ли под фоновым изображением ул

Question

Как вы можете сделать это в CSS? Я хочу, чтобы фоновое изображение li скользило под фоновым изображением ul, в котором они находятся. Я пытался сделать это с z-index, но это не сработало.

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;
}

Возможно ли это? И как это сделать, если это так.

обновление: изображение, объясняющее, что я имею в виду

Answer 1

Мне очень нравится идея, я просто сделал ее для тебя, Джарко. Кажется, она не так точна, как ты хочешь, но она довольно похожа.

Демо

---

Немного div, чтобы показать полосу, и script, чтобы поднять и опустить ее

$("ul").mouseenter(function() {
    $("#bar").animate({
        height: $("ul").height()
    });
}).mouseleave( function() {
    $("#bar").animate({
        height: 20
    });
});

Обновление с высотами