JQuery SlideToggle не остается внизу

Я пытаюсь создать суб-навигатор, который будет скользить вниз, щелкая по ссылкам, расположенным в отдельном div над суб-навигатором. В настоящее время я правильно скрываю суб-навигацию. Однако при нажатии на одну из ссылок суб-навигатор будет быстро показывать всего несколько секунд, а затем снова спрячется. Может ли кто-нибудь помочь мне разобраться, как заставить суб-навигацию упасть, а затем остановиться при нажатии?

codepen здесь: http://codepen.io/anon/pen/tkgmx видео проблемы: http://www.youtube.com/watch?v=DcvIwdleMFY&feature=youtube_gdata_player

HTML

<div>
        <ul class="top-nav">
            <li class="click"><a href="vision.php">Click here</a></li>
            <li><a href="#">link 2</a></li>
            <li><a href="#">link 3</a></li>
            <span class="arrow-up"></span>
        </ul>
    </div>
<div class="nav-items">
    <div class="drop-container">
        <ul class="sub-nav">
            <li><a href="">nav item 1</a>|</li>
            <li><a href="">nav item 1</a>|</li>
            <li><a href="">nav item 1</a>|</li>
        </ul>
    </div>
</div>

CSS

 .top-nav {
li {
 display: inline;
 list-style: none;
padding-left: 10px;
a {
  display: inline-block;
 }
}
.arrow-up {
width: 0; 
height: 0; 
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid gray;
position: absolute;
top: 50px;
right: 334px;
}
}


.nav-items {
background-color:gray;  
.drop-container {
.sub-nav {
  list-style: none;
  li {
    display: inline;
    a {
      display: inline-block;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}
}
}

JS

$(document).ready(
function() {
$( ".nav-drop" ).hide();

$( ".click" ).click(function() {
$( ".nav-items" ).slideToggle( "slow" );
});
});