3D CSS + Floating Elements - Floating over 3D Transforms

I am working on a small calendar function with 3D conversions / transitions in dates. When you overhang, they should open like a small door. I work great.

Here is my problem: in the calendar, the dates from the next line overlap the effect of a small door. Basically, you do not see the bottom of the 3d effect. I made the overlapping litranslucent, so you can see that the bottom of the door there is just hidden.

I don't think this is a z-index problem, but something with floats. I am completely open to positioning calendar dates in a different way, but that's all I can think of now.

Here's some jQuery that applies a top-down z-index to elements, but it does nothing. Even if it worked, I had the feeling that it would cut off the top of the door effect.

Here jsFiddle shows everything in action. Remember to use Safari or Chrome.

 $('.cal ul li').each(function(index) {
     var days = $('.cal ul').children('li').size();
     $(this).css('z-index',days - index);
 });

Thank! I hope that I will not be ahead of myself in what 3D css conversions are capable of.

Edit

Well, I think I did it. I adjusted the z-index to li:hover(days) and this ensures that it will be in the foreground. I ran into a problem when borders liare on top of the content.

, , li, li:hover. , 2D, , 3D-. , li:hover, - z-. 3D a li, z-, .

jsFiddle, . , , - .