javascript - 降順のリスト項目に覆われることなく、そのリスト項目の外側のリスト項目に内部コンテンツを表示する方法

Question

クリックして内部コンテンツを表示するように切り替えることができるリスト項目を含むグリッドがあります - http://jsfiddle.net/TimmyTodd/SUf5y/1/

各リスト項目には可視のオーバーフローがありますが、内部コンテンツはその後に続くリスト項目によって覆われます (内部コンテンツの z-index が「li」の上に設定されていても)。

その内部コンテンツをすべてのリスト項目の上に表示する方法はありますか?

これが私のCSSです：

li {
    width: 40px;
    height: 40px;
    display: block;
    float: left;

    position: relative;
    z-index: 1;

    overflow: visible;
}
.innerContentToShow {
    width: 40px;
    height: 40px;

    position: absolute;
    z-index: 2;

    top: -10px;
    left: -10px;

    border: 10px solid #ccc;
    background-color: transparent;
}
.innerContentToShow p {
    text-align: center;
    font-size: 12px;
    background-color: #fff;
    padding: 5px;
    margin-top: 28px;
}

そして、私のHTMLリストコードのいくつか:

<ul>
    <li>
    <div class="innerContentToShow">
            <p>Lorem Ipsum</p>
        </div>
    </li>
    <li>
    <div class="innerContentToShow">
            <p>Lorem Ipsum</p>
        </div>
    </li>
    <li>
        <div class="innerContentToShow">
            <p>Lorem Ipsum</p>
        </div>
    </li>
</ul>