Making sub navigation show on Skeleton Wordpress theme

Question

Trying to add sub menu items to a navigation but even with the correct HTML on the navigation, but the sub menu doesn't show.

It's using the Skeleton wordpress theme and the header is manually updated as and when required but needing to add sub menu.

HTML:

<div id="navigation" >
    <div class="menu container">
    <ul class="row sixteen columns">
    <li class="page_item menu-home"><a href="/">Home</a></li>
    <li class="page_item page-item-56"><a href="/about">About</a></li>
<ul class="sub-menu">
    <li class="page_item page-item-10"><a href="/volunteer">Volunteer</a></li>
</ul>
    <li class="page_item page-item-4"><a href="schedule">Schedule</a></li>
    <li class="page_item page-item-3"><a href="shows">Shows</a></li>
    <li class="page_item page-item-4663"><a href="podcasts">Podcasts</a></li>
    <li class="page_item page-item-12"><a href="features">Features</a></li>
    <li class="page_item page-item-13"><a href="events">Events</a></li>
    <li class="page_item page-item-8"><a href="contacts">Contact</a></li>
    <li class=""><a href="/voices">Voices</a></li>

    </ul>
    </div>
    </div>

CSS:

/* @group Navigation Bar */

#navigation {
    width: 100%;
    background: #1B7A9D;
    background: rgba(3, 68, 91, 0.5);
    position: relative;
    border: none;
    -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow:    0px 2px 8px rgba(0, 0, 0, 0.2);
box-shadow:         0px 2px 8px rgba(0, 0, 0, 0.2);

        font-family: 'Coustard', 'Georgia', serif;
}


#navigation ul li {
    position: relative;
    border: none;
}

#navigation ul li a {
    background-image: none;
    padding: 15px 20px /* 21px */;
    text-decoration: none;
    display: block;
    font-weight: normal;
    color: #ffffff;
    border: none;
}

/* Navbar Hover Links */

#navigation ul li:hover a,
#navigation ul li a:hover {
    background: rgba(255, 255, 255, 0.2);
    position: relative;
}

#navigation ul li:hover li a {
    color: #595959;
    font-weight: normal;
}

/* Navbar Active Links */

#navigation ul li.active a {
    color: #333;
    background: #fff;
}


/* Nav Sublevel */

#navigation ul.sub-menu {
    background: -moz-linear-gradient(270deg, #FCFCFC, #ECECEC) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(270deg, #FCFCFC, #ECECEC) repeat scroll 0 0 transparent;
    border-color: #EAEAEA #F5F5F5 #F5F5F5 #F5F5F5;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
     border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

#navigation ul.sub-menu li {
    border: none;
}

/* Nav Sublevel Links */

#navigation ul.sub-menu li a {
    background: #f0f0f0;
    padding: 5px 0px 5px 8px;
    height: 32px;
    line-height: 32px;
    border-radius: 0;
    min-width: 210px;
    border-bottom: none;
    position: static;
    behavior: none;
}

/* Nav Sublevel Hover */

#navigation ul.sub-menu li a:hover {
    background: #fff;
    border-bottom: none;
}


/* @end */

Answer 1

your sub menu has to be a sub of an li

<ul>
  <li>ITEM</li>
  <li>ITEM
      <ul>
         <li>SUBITEM</li>
      </ul>
  </li>
</ul>

or using your code

<div id="navigation" >
  <div class="menu container">
     <ul class="row sixteen columns">
       <li class="page_item menu-home"><a href="/">Home</a></li>
       <li class="page_item page-item-56"><a href="/about">About</a>
         <ul class="sub-menu">
           <li class="page_item page-item-10"><a href="/volunteer">Volunteer</a></li>
            </ul></li>
       <li class="page_item page-item-4"><a href="schedule">Schedule</a></li>
       <li class="page_item page-item-3"><a href="shows">Shows</a></li>
       <li class="page_item page-item-4663"><a href="podcasts">Podcasts</a></li>
       <li class="page_item page-item-12"><a href="features">Features</a></li>
       <li class="page_item page-item-13"><a href="events">Events</a></li>
       <li class="page_item page-item-8"><a href="contacts">Contact</a></li>
       <li class=""><a href="/voices">Voices</a></li>

    </ul>
  </div>
</div>