Can't click a link because of z-index - html

Question

I have the following: http://jsfiddle.net/5mbK8/2/
The text Link is supposed to function as a link, but it doesn't work because .container .image has a z-index of -1. If I remove the z-index, it works, but then the image isn't behind the yellow shadow.
How can I make the text clickable while keeping the background image behind the yellow box shadow?
HTML:
<div class="container">
<div class="side"></div>
<div class="image" style="background: url('http://i.imgur.com/T0VWLqZ.png');">
<div class="menu">
<ul>
<li><a href="#">Link</li>
</ul>
</div>
</div>
</div>
CSS:
a {
color: black;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.container {
width: 900px;
height: 300px;
}
.container .image {
width: 598px;
height: 300px;
float: right;
position: relative;
z-index: -1;
}
.container .side {
float: left;
width: 302px;
height: 300px;
background: red;
box-shadow: 5px 0 5px -5px yellow;
}
.container .image .menu {
position: absolute;
bottom: 0;
left: -25px;
}
.container .image .menu ul {
list-style: none;
margin: 0;
}
.container .image .menu ul li {
display: inline-block;
text-align: center;
padding: 10px;
background: white;
}

Answer 1

Check out this fiddle: http://jsfiddle.net/5mbK8/5/
A solution would be to position the menu outside the .image div.
And of course you will have to adapt the left: 300px; depending on what width the .side will have.
EDIT (added code):
<div class="container">
<div class="side"></div>
<div class="image" style="background: url('http://i.imgur.com/T0VWLqZ.png');"> </div>
<div class="menu">
<ul>
<li>Link</li>
</ul>
</div>
</div>
CSS:
a {
color: black;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.container {
position: relative;
width: 900px;
height: 300px;
}
.container .image {
width: 598px;
height: 300px;
float: right;
position: relative;
z-index: -1;
}
.container .side {
float: left;
width: 302px;
height: 300px;
background: red;
box-shadow: 5px 0 5px -5px yellow;
}
.container .menu {
position: absolute;
bottom: 0;
left: 300px;
}
.container .menu ul {
list-style: none;
margin: 0;
}
.container .menu ul li {
display: inline-block;
text-align: center;
padding: 10px;
background: white;
}