Navigation inside Flexslider but the dropdowns aren't working as they should be?

As you can see in this image, as I'm hovering over the menu which is inside a flexslider, the menu won't drop down correctly. It stops when the bottom of the slider ends. Could anyone help me to get it over the top? I've tried adding z-index to everything but still had no luck. Maybe I was doing it wrong.

Here's all my code for the slider and the navigation menu:

<div class="out-content"> 
<div class="container_12">
<div class="content " role="main"> 
<div class="flexslider">
<ul class="slides">
<li><img src="img/slider/slide1.png" alt=""></li>
<li><img src="img/slider/slide4.png" alt=""></li>
<li><img src="img/slider/slide6.png" alt=""></li>
<li><img src="img/slider/slide7.png" alt=""></li>
<li><img src="img/slider/slide3.png" alt=""></li>
<li><img src="img/slider/slide8.png" alt=""></li>
<li><img src="img/slider/slide2.png" alt=""></li>
<li><img src="img/slider/slide9.png" alt=""></li>
</ul>
</div>
<div id="slide-menu">
<p class="slide"> 
<a href="#"  class="btn-slide"></a>
</p>
<div id="panel">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Wedding Dresses</a>
<ul>
<li><a href="#">Maggi Sattaro</a></li>
<li><a href="#">Ronald Joyce</a></li>
<li><a href="#">Amanda Wyatt</a></li>
<li><a href="#">Mark Lesley</a></li>
<li><a href="#">Romantica of Devon</a></li>
<li><a href="#">"Only You" by Decorum Bridal</a></li>
</ul>
</li>
<li><a href="#">Bridesmaids</a>
<ul>
<li><a href="#">Ebony Rose</a></li>
<li><a href="#">Mark Lesley</a></li>
<li><a href="#">Romantica of Devon</a></li>
<li><a href="#">Amanda Wyatt</a></li>
<li><a href="#">Linzi Jay</a></li>
</ul>
</li>
<li><a href="#">Mens Formal Wear</a>
<ul>
<li><a href="#">Peter Posh</a></li>
<li><a href="#">Ultimate Formal Hire</a></li>
</ul>
</li>
<li><a href="">Sale</a></li>
<li><a href="">Events</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>

nav {
font-family: 'cinzel', cursive;
font-style: normal;
font-size: 12px;
background: url(../img/menu-bg.png);
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
padding: 0 42px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; 
clear: both; 
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover a {
color: #AFAEAE;
}
nav ul li a {
display: block; 
padding: 20px 20px;
color: #FFF; 
text-decoration: none;
}
nav ul ul {
background: url(../img/menu-bg.png); 
border-radius: 0px; 
padding: 0;
position: absolute; 
top: 100%;
}
nav ul ul li {
float: none; 
border-top: 1px solid #AFAEAE;
border-bottom: 1px solid #AFAEAE;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #FFF;
font-size: 12px;
} 
nav ul ul li a:hover {
background: url(../img/menu-bg.png);
}

Solution

To fix this make the following changes in the stylesheet

.content {
    overflow:hidden; //change this to below
    overflow:visible;
}

And add this

nav ul ul{
    z-index:1 //added this line
}

The overflow:hidde; for the div content was preventing the dropdown to display beyond the div size. I think the above styling should will fix your issue.