Create Drop Down Menu on Website

Hello,

I had a ticket out to add a drop down menu to my website. The code I received worked. The problem now when I go to add items to another link, it does not work on that link. I am looking for a simple way to have drop down's on my menu. Below is what I have in place now which works but only for 1 link.

Website(http://evangelosdesigns.com/#!/)

HTML:
<nav class="menu">
<ul id="menu">
  <li><a href="#!/page_Evangelos">Evangelos</a></li>
  <li><a href="#!/page_Services">Features</a></li>
  <li><a href="#!/page_Gallery">Gallery</a>
       <div>
       <a href="#!/page_Subvices">Sub&nbsp;tures</a><br />
       <a href="#!/page_Subvik">Sub&nbsp;vings</a><br />
       <a href="#!/page_Subart">Sub&nbsp;antine&nbsp;Art</a>
       </div>
  </li>
  <li><a href="#!/page_Carvings">Byzantine Art</a></li>
  <li><a href="#!/page_Carvings">Sculptures</a></li>
  <li><a href="#!/page_Carvings">Carvings</a></li>
  <li><a href="#!/page_Contacts">Contacts</a></li>
</ul>
</nav>


CSS:
.menu { float:right; padding-top:36px;}
#menu > li { float:left; margin-left:30px; position:relative;}
#menu > li div{
display: none;
text-align: center;
position: absolute;
top:22px;
left: -20px;
background: #ccc;
padding: 3px;
border-radius: 8px
}
#menu > li > a{/* display:block;*/ font:17px 'Asap', sans-serif; color:#fff; text-shadow:1px 1px rgba(0,0,0,.5);}
#menu > li > a:hover, #menu > .active > a{background: blue; }


JAVA:
<script>
var lis = document.getElementById("menu").getElementsByTagName("li");
lis[2].children[0].onclick = function (event) { // the index 2 is the Gallery
event.preventDefault();

var div1 = this.parentElement.getElementsByTagName("div")[0];
if (div1.style.display == "inline-block") div1.style.display = "none";
else div1.style.display = "inline-block";
}

</script>