<a>タグ　リンクしない（img画像ホバーでキャプション表示の時）

img画像をホバーした時にalt属性値をキャプションとして表示し、
クリックした時にリンク先に飛ぶという処理をしたいと思っています。

キャプションの表示まではうまくいったのですが（ここまではネットで見たコードを参考にできました）、
クリックしてもリンクが反応しません。

キャプション表示の<div>に<a>タグが覆われてしまったからだと思うのですが、この問題の解決法がわからず困っています。
アドバイス頂きたく質問いたします。
よろしくお願いいたします。

HTML
1<div class="food">
2 <ul>
3  <li><a href="menu.html#menu1"><img src="image01.jpg" alt="ご飯"></a></li>
4　<li><a href="menu.html#menu2"><img src="image02.jpg" alt="パン"></a></li>
5　<li><a href="menu.html#menu3"><img src="image03.jpg" alt="パスタ"></a></li>
6 </ul>
7</div>

CSS
1.food li{
2  cursor:pointer;
3  color:#fff;
4  display: block;
5  position:relative;
6  width:50%;
7}
8.food li img{
9    vertical-align:bottom;
10    width:100%;
11}
12.food div{
13    position:absolute;
14    display:none;
15    width:100%;
16    height:100%;
17    background:rgba(79,57,47,0.3);
18    top:0;
19    left:0;
20    box-sizing:border-box;
21}
22.food p{
23    position:relative;
24    top:50%;
25    text-align:center;
26    padding:10px;
27}
28

jQuery
1$(function(){
2$('.food li').hover(function(){
3        $(this).append('<div><p>' + $(this).children('a').children('img').attr('alt') + '</p></div>');
4        $(this).children('div').stop().fadeIn();
5        $(this).children('div').children('p').stop().animate({'top' : '40%'});
6    }, function(){
7        $(this).children('div').stop().fadeOut();
8        $(this).children('div').children('p').stop().animate({'top':'45%'}, function(){
9            $(this).parent('div').remove();
10        });
11    });
12});