向列表项添加锚标记，使列表项消失

这是我在这里的第一个问题，所以如果措辞不正确，请道歉。我试图用jQuery制作一个弹出式移动导航菜单，但是当我添加锚标记到我的列表项时，它们消失了。这是HTML:

<nav>
    <button id="nav-open">&#9776;</button>
    <div id="menu">
        <button id="nav-close"> X </button>
        <ul>
            <li><a href="http://foo.com">Home</a></li>
            <li>About</li>
            <li>Events</li>
            <li>Gallery</li>
            <li>Booking</li>
        </ul>
    </div>
</nav>

JS:

$("#nav-open").click(function(event){
   $("#menu").show();
   $(this).addClass("active");
   event.preventDefault();
});
$("#nav-close").click(function(event){
   $("#menu").hide();
   $(this).removeClass("active");
   event.preventDefault();
});

当用户在移动设备上点击#nav-open时，它会弹出菜单。(当单击#nav-close时，反之亦然。)我试图添加锚标记到列表项，但无论出于何种原因，当我添加链接到#menu的li's，文本完全消失。

有什么办法解决这个问题吗?

下面是CSS:

  #menu {
   background: #000;
   opacity: 0.95;
   font-family: Arial Narrow;
   text-transform: uppercase;
   text-align: left;
   font-weight: bold;
   font-size: 30px;
   margin-right: 5%;
   height: 60px;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 260px;
   padding-bottom: 10px;
  }