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; }