How can I make li background visible as well with jQuery?
<p>Javascript as below:</p>

<pre><code>$(function(){

    div = $("#titlelist");

    ul = $('#titlelist li');

    ul.css({overflow: 'hidden'});


    ul.each(function(){
        $(this).css({overflow: 'hidden'});
        $(this).mouseenter(function(e){               
            $(this).css({overflow: 'visible', background:'#CCC', 'z-index': '100'});

        });
        $(this).mouseleave(function(e){               
            $(this).css({overflow: 'hidden', background:''});

        });
    });
});
</code></pre>

<p>HTML as below:</p>

<pre><code>&lt;div id="container"&gt;
    &lt;ul id="titlelist"&gt;
        &lt;li&gt;GBin1 Page view monitor Demo&lt;/li&gt;
        &lt;li&gt;GBin1 Page view monitor Demo&lt;/li&gt;
        &lt;li&gt;GBin1 Page view monitor Demo&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>When mouse enter, only li content and part of background color can be visible, how can I make the background visible for all li content as well?</p>

<p>Thanks!</p>
