切换幻灯片位于div z-index：999;不工作

Question

当我点击切换按钮时，我只能看到一块菜单，因为它隐藏在.bodywhite的位置。

所以我试着添加：

position: relative;
z-index: 10000;

尝试添加溢出：可见;但它又被隐藏了。

我的CSS

@media only screen and (min-width: 480px) and (max-width: 768px) {
#toggle {
  display: inline-block;
  width: 28px;
  height: 30px;
  margin-top: -23px;
  cursor: pointer;
}

#toggle div {
  position: relative;
  z-index: 10000;
  width: 100%;
  height: 5px;
  background: red;
  margin: 4px 0;
  transition: all 0.3s;
  backface-visibility: hidden;
}

.open .one {
  transform: rotate(45deg) translate(5px, 5px);
}

.open .two {
  opacity: 0;
}

.open .three {
  transform: rotate(-45deg) translate(7px, -8px);
}

.navigation-menu {
    overflow:visible;
  position: relative;
  z-index: 10000;
    height: 300px;
    background:white;
  display: none;
}
.vertical ul {
      position: relative;
  z-index: 10000;
    margin: 0; 
    padding: 0;
    width:185px;
    list-style-type: none;
}

.vertical ul li a {
    text-decoration: none;
    color: white; 
    padding: 10.5px 11px;
    background-color: #005555;
    display:block;
}

.vertical ul li a:visited {
    color: white;
}

.vertical ul li a:hover, .vertical ul li .current {
    color: white;
    background-color: #5FD367;
}

}

切换的JavaScript

<script type="text/javascript">
$("#toggle").click(function() {
  $(this).toggleClass("open");
  $(".navigation-menu").slideToggle();
});
</script>

然后菜单下的div

.bodywhite{
    float:left; 
    width:100%;
    background-color:#fff; 
    -webkit-box-shadow:5px 0px 54px 0px rgba(0, 0, 0, 0.2); 
    box-shadow:5px 0px 54px 0px rgba(0, 0, 0, 0.2);
}

HTML

 <div class="topnav">
     <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>          
            <div class="searcharea">
            <?php include (TEMPLATEPATH . '/inc/search-form.php'); ?>
            </div>
            <div class="clear"></div>
        </div>
        <div id="toggle">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

<div class="navigation-menu">
<ul class="vertical">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
        <div class="clear"></div>
    </div>
</div>