При наведении фоновое изображение исчезает за текстом

С помощью предыдущей помощи Stackover я сделал меню наведения, отображающее дни недели. Когда вы наведите курсор на день, изображение появляется с текстом сверху. Я дошел до этого. Однако теперь моя проблема заключается в следующем: когда вы наводите курсор на текст, изображение за ним скрывается.

Я подумал, может быть, это проблема, которая может быть исправлена с помощью z-index, но это не сработало.

Я сделал JSfiddle

Вот мой CSS

#nav {
display:inline;
list-style:none;
position:fixed;
width:1290px;
margin:0 auto; 
left:0px; 
right:0px;
float:clear;
top:130px;
z-index:1000;

}

.menu li {
display:inline;
vertical-align:top; 
float:left;

}

.menu li a {
display:block;
height:407px;
width:250px;

}

.img1 {
width:250px;
height:407px;
position:relative;
}

.thursButton {
width:250px;
height:407px;
display:block;
}

#thursButton {
background-image:url('http://static.tumblr.com/2wdsnoc/K8umxhswx/thu.png');
}

#thursButton:hover {
background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png');
}
.left p {
color:#FFFFFF;
display:none;
font-size:20px;
left:5px;
position:absolute;
text-shadow:1px 1px 1px #000000;
text-transform:uppercase;
top:100px;
width:245px;
 white-space: pre-line;
word-wrap: break-word;


}

.left:hover p {
display:block;

}

HTML-код

<div id="nav"> <div style="display:inline-block;white-space: nowrap">
<ul class="menu">
    <li>
        <div class="img1 left"> <a href="#" id="thursButton" class="thursButton" border="0"></a>

            <p><u>Thursday, 19th</u>
Text
<br/>Text
            </p>
        </div>
    </li>
    <li>

            </p>
        </div>
    </li>

Спасибо Stackoverflow, как всегда!