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



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 improve 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 author works</a></li> <li class="dropitem"><a href="#why">why take 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; }

javascript jquery html css web

Comments

Popular posts from this blog

java - How to set log4j.defaultInitOverride property to false in jboss server 6 -

c - GStreamer 1.0 1.4.5 RTSP Example Server sends 503 Service unavailable -

Using ajax with sonata admin list view pagination -