Nav with dropdown menu's is very glitchy

Question

I'm working on a site to learn more about javascript but I dont know how to fix this. If you look at the fiddlle and try the nav you're self you'll know what im talking about(if not, try hover on Multiplier and try to click Quadruple). Also the .slideUp() seems glitch and I don't know why. I want it to look like it slidesdown from the nav and slides back up into the nav.

So how would you fix these 2 issues? https://jsfiddle.net/26L2h6zg/

// Drop down menu
$(".shopDrop").hide();

$(".shop ul li").hover(function(){
    $(this).find(".shopDrop").slideDown();
}, function(){
    $(this).find(".shopDrop").slideUp();
});

// Drop down menu info
$(".shopDrop a").hover(function(){
  $(this).next(".shopHoverInfo").fadeIn("slow");
}, function(){
  $(this).next(".shopHoverInfo").fadeOut("slow");
});

Answer 1

 // Drop down menu $(".shopDrop").hide(); $(".shop ul li").hover(function(){ $(this).find(".shopDrop").stop(true).slideDown(); }, function(){ $(this).find(".shopDrop").stop(true).slideUp(); }); // Drop down menu info $(".shopDrop a").hover(function(){ //$(this).stop(true, true); $(this).next().stop(true).fadeIn("slow"); }, function(){ //$(this).stop(true); $(this).next().stop(true).fadeOut("slow"); }); 

 nav.shop { width: 100%; height: 100px; background: #182024; margin: 0; } nav.shop ul { width: 960px; list-style-type: none; margin: 0 auto; padding: 0; } nav.shop ul li { display: inline-block; vertical-align: top; padding-left: 25px; } nav.shop ul li h1 { font-size: 35px; margin-right: 20px; } nav.shop ul li h2 { color: #fff; text-decoration: none; font-size: 35px; margin-left: 10px; } nav.shop ul li a { color: #fff; text-decoration: none; font-size: 35px; padding-bottom: 10px; padding-top: 10px; display: block; } .shopDrop { position: absolute; background: #182024; padding: 30px 10px 0 10px; margin-top: -30px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } nav.shop ul li div a {font-size: 20px;} nav.shop ul li div span {font-size: 15px;} #shopMultiplier{border-bottom: 5px solid #CA2525;} #shopAutoclicker{border-bottom: 5px solid #2596CA;} #shopFarms{border-bottom: 5px solid #CAB125;} #shopSkills{border-bottom: 5px solid #35CA25;} .shopHoverInfo { display: none; width: 150px; background: #1C262A; text-align: center; padding: 0; color: #fff; } .shopHoverInfo h3 { font-size: 17px; background: #CA2525; margin: 0; padding: 5px; border-top-right-radius: 10px; border-top-left-radius: 10px; } .shopHoverInfo h4 { font-size: 17px; margin: 0; background: #EED634; } .shopHoverInfo p { font-size: 15px; } 

 <nav class="shop"> <ul> <li><h1>SHOP</h1></li> <li> <h2 href="#" id="shopMultiplier"><a href="#">Multiplier</a></h2> <div class="shopDrop"> <a href="#" id="doublePoints">Double knowledge <span>&#x2606;</span></a> <div class="shopHoverInfo"> <h3>Double Knowledge</h3> <h4>Price: <span id="shopDoublePrice"></span> knowledge</h4> <p>When you click you get 2x knowledge</p> </div> <a href="#" id="triplePoints">Triple knowledge <span>&#x2606;</span></a> <div class="shopHoverInfo"> <h3>Triple Knowledge</h3> <h4>Price: <span id="shopTriplePrice"></span> knowledge</h4> <p>When you click you get 3x knowledge</p> </div> <a href="#" id="quadruplePoints">Quadruple knowledge <span>&#x2606;</span></a> <div class="shopHoverInfo"> <h3>Quadruple Knowledge</h3> <h4>Price: <span id="shopQuadruplePrice"></span> knowledge</h4> <p>When you click you get 4x knowledge</p> </div> </div> </li> <li><h2 href="#" id="shopAutoclicker"><a href="#">Auto-clicker</a></h2></li> <li> <h2 href="#" id="shopFarms"><a href="#">Farms</a></h2> <div class="shopDrop"> <a href="#" id="simpleminds">Simple mind's <span></span></a> <div class="shopHoverInfo"> <h3>Simple Mind</h3> <p>Simple mind farms 1 knowledge each second.</p> </div> <a href="#" id="intelligentminds">intelligent mind's <span></span></a> <div class="shopHoverInfo"> <h3>Intelligent Mind</h3> <p>Intelligent mind farms 2 knowledge each second.</p> </div> </div> </li> <li> <h2 href="#" id="shopSkills"><a href="#">Skills</a></h2> <!-- <div class="shopDrop"> <a href="#" id="simpleminds">Simple mind's <span></span></a> </div> --> </li> </ul> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

It would be easier to make HTML according to your needs. Hope this helps.