Question

Given this code:

$(function(){
    ul = $("#titlelist");

    li = $('#titlelist li');

    $('.list').mouseenter(function(e){             
        $(this).css({background:'#000', 'z-index': '100'}).animate({overflow: 'visible',  width: '200%'});
    });

    $('.list').mouseleave(function(e){             
        $(this).stop().css({overflow: 'hidden', background:'', width: '140',  'z-index': '0'});
    });
});

<div id="container">
    <ul id="titlelist">
        <li class='list'>GBin1 Page view monitor Demo Page view monitor Demo</li>
        <li class='list'>GBin1 Page view monitor Demo</li>
        <li class='list'>GBin1 Page view monitor Demo Page view monitor Demo</li>
    </ul>

    <ul id="titlelist">
        <li class='list'>xxxxxxxxxxxxxxxxxxxxxxxxxxDemo Page view monitor Demo</li>
        <li class='list'>GBin1 Page view monitor Demo</li>
        <li class='list'>GBin1 Page view monitor Demo</li>
    </ul>

    <ul id="titlelist">
        <li class='list'>GBin1 Page view monitor Demo Demo Page view monitor Demo</li>
        <li class='list'>GBin1 Page view monitor Demo</li>
        <li class='list'>GBin1 Page view monitor Demo</li>
    </ul>
</div>

that may be tested with jsfiddle:

How can I make the LI in first UL above the second UL when mouse hover on LI in first UL?

It looks it will be shown below the second UL, and z-index doesn’t work. Any ideas?

Answer 1

Z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

So you need to change static to relative, which shouldn’t cause any problems.

src, http://www.w3schools.com/cssref/pr_pos_z-index.asp

fiddle, http://jsfiddle.net/ybxfH/