Сделать DIV видимым при щелчке LI

У меня есть" оверлей " div id, который я хочу сделать видимым, когда пользователь нажимает на li , который его охватывает.

HTML:

<ul>
    <li class="album" id="nirvana-nevermind">
         <div id="overlay">
              <a href="http://www.nirvana.com">Nirvana</a> Nevermind
         </div>
    </li>
</ul>

CSS:

#overlay { visibility: hidden; }

JavaScript:

$(document).ready(function(){

$(".album").click(function() {
    //need the following to toggle
    $("#overlay").css("visibility", "visible");    
});

$("#overlay").click(function() {
    window.location=$(this).find("a").attr("href");
    return false;
});

});

Обновление: Теперь код работает . Я изменил код в соответствии с тем, что использую. Наложение DIV # отображается при щелчке по LI.album, однако у меня есть несколько из этих LI.album рядом друг с другом, и независимо от того, какой LI был нажат, #overlay отображается только на самом первом LI. Есть идеи, как это исправить?