subnavigation bar help

hello, i am trying to implement a subnavigation but facing issues with it.

the html is

<div id="menu">
<ul>
<li class="current_page_item"><a href="index.php">Home</a></li>
<li><a href="bishops_message.php">Bishops Message</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="life_members.html">Life Members</a>
<ul>
<a href="nav1.html">subnav1</a>
<a href="nav2.html">subnav2</a>
</ul>
</li>
<li><a href="job_oppertunity.php">Job Oppertunity</a></li>
<li class="last"><a href="bulletin.php">Bulletin</a>
</li>
</ul>

</div>

the css is

#menu {
overflow: hidden;
width: 1200px;
background: #C81F18;
font-size: 20px;
color: #000000;
}

#menu ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}

#menu li {
display: inline-block;
}


#menu a {
display: block;
padding: 15px 40px 15px 40px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 16px;
font-weight: 200;
color: #FFFFFF;
border: none;
}

#menu a:hover, #menu .current_page_item a {
text-decoration: none;
}

#menu .current_page_item a {
background: #950D08;
color: #FFFFFF;
}

#menu .last {
border-right: none;
}

can someone please help

 

The HTML part should look more like this

<div id="menu">
<ul>
  <li class="current_page_item"><a href="index.php">Home</a></li>
  <li><a href="bishops_message.php">Bishops Message</a></li>
  <li><a href="gallery.html">Gallery</a></li>
  <li><a href="life_members.html">Life Members</a>
    <ul>
    <li><a href="nav1.html">subnav1</a></li>
    <li><a href="nav2.html">subnav2</a></li>
    </ul>
  </li>
<li><a href="job_oppertunity.php">Job Oppertunity</a></li>
<li class="last"><a href="bulletin.php">Bulletin</a>
</li>
</ul>
 
</div>

HTML:

There still needs to be adjustments to the CSS. You should find this article helpful http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu