Hover Submenu Getting Cut Off - css

Question

I'm working on this project: http://www.livingthelighterlife.com/
The top navigation bar (Home, About, Contact, Work With Me) is giving me some difficulty. I have a hover submenu right now under the "About" section, but it is appearing under the header, for lack of a better explaination. I've messed with the z-index and that doesn't seem to be doing anything. Not quite sure what else to try.
Thanks in advance!
#top-navigation {
float: left;
}
#top-navigation ul {
list-style: none;
position: relative;
}
#top-navigation ul a {
display: block;
color: #ffffff;
text-decoration: none;
}
#top-navigation ul li {
position: relative;
float:left;
margin: 0px 10px;
}
#top-navigation ul li:hover {
background: #f6f6f6;
}
#top-navigation ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #ffffff;
padding: 0;
}
#top-navigation ul ul li {
float:none;
width:200px
}
#top-navigation ul ul a {
line-height: 120%;
padding: 10px 15px;
}
#top-navigation ul ul ul {
top: 0;
left: 100%;
}
#top-navigation ul li:hover > ul {
display: block;
}
<div class="before-header"><section id="text-5" class="widget widget_text"><div class="widget-wrap"> <div class="textwidget"><nav id="top-navigation">
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>
Contact
</li>
<li>
Work With Me
</li>
</ul>
</nav></div>
</div></section>
</div>

Answer 1

In header section in this class .before-header you are using overflow hidden. That's why your submenu doesn't show. You can not use overflow hidden where you want to use submenu. Just remove overflow hidden.

Answer 2

check the header div with class .before-header, Do the following change:
.before-header {
z-index: 500;
background: #6d5d68;
clear: both;
/* overflow: hidden; */
padding: 7px 0;
text-align: center;
font-family: 'Arquitecta-Medium', 'Source Sans Pro', Helvetica, Arial, sans-serif;
font-size: 12px;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
}