javascript - Drop down menu is Glitchy at the edge of menu button -

i have odd issue. created standard dropdown menu having issue menu dissapearing when right between menu , drop down. cant find css stop hover state maybe eyes better mine.

here gif of happening: http://imgur.com/axf6skk

my js code:

//------- nav menu --------// $('nav li').hover(   function () {     $('ul', this).stop(true,true).fadein({ duration: 300, queue: false }).slidedown(300);   },   function () {     $('ul', this).stop(true,true).fadeout({ duration: 300, queue: false }).slideup(300); }); 

relevant html:

<nav>   <ul class="center">     <li class="menu">       <a href="#home">home</a>     </li>     <li class="menu">       <a class="inactive">get started</a>       <ul class="dropdown hidden" id="drop1">         <li class="dropitem"><a href="#start">start making ccr</a></li>         <li class="dropitem"><a href="#howitworks">how ccr writer works</a></li>         <li class="dropitem"><a href="#why">why choose ccr writer</a></li>         <li class="dropitem"><a href="#myprevious">access previous ccrs</a></li>       </ul>     </li>   </ul> </nav> 

relevant css:

nav > ul {   margin: 0 auto;   padding: 0;   list-style-type: none;   height: 100px;   float: right;   padding-right: 30px; }  li.menu {   display: inline-block;   padding:0;   margin: 0;   padding-left: 15px;   padding-right: 15px;   height: 100px;   position: relative; }  li.menu:hover { background-color: #ffffff; }  li.menu {   font-size: 12pt;   padding-top: 33px;   display: table-cell;   vertical-align: middle;   position: relative; }  li.menu:hover { color: #232323; }  li.dropitem {   padding: 0;   margin: 0; }  li.dropitem:hover { background-color: #dadada; }  li.dropitem {   color: #232323;   margin: 0;   padding: 10px;   padding-left: 15px;   padding-right: 15px;   font-size: 13pt; }  ul.dropdown {   position: absolute;   white-space: nowrap;   width: auto;   min-width: 100%;   top: 100px;   left: 0;   padding-top: 0;   margin: 0;   padding-bottom: 10px;   z-index: -1;   border: none;   border-radius: 0px 0px 2px 2px;   box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);   background-color: #fff;   height: auto; } 

remove z-index: -1 css:

ul.dropdown {   position: absolute;   white-space: nowrap;   width: auto;   min-width: 100%;   top: 100px;   left: 0;   padding-top: 0;   margin: 0;   padding-bottom: 10px;   /* z-index: -1; */       /* <-- remove line */   border: none;   border-radius: 0px 0px 2px 2px;   box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);   background-color: #fff;   height: auto; }