ドロップダウンメニューのナビは非常にglitchyです

Question

私はjavascriptの詳細についてはサイトで作業していますが、これを修正する方法はわかりません。あなたがフィダルを見て、あなたが自己であることをナビにしようとすると、私が何を話しているか知ることができます（もしそうでなければ、マルチプライヤーでホバーを試し、クワドルプルをクリックしようとする）。 また、.slideUp（）に不具合があり、その理由がわかりません。私はそれがnavからのスライドダウンのように見えるようにして、navに戻ってスライドします。

どのようにこれらの2つの問題を修正しますか？ 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(){ 
 
    \t $(this).find(".shopDrop").stop(true).slideDown(); 
 
}, function(){ 
 
    \t $(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 { 
 
\t width: 100%; 
 
\t height: 100px; 
 
\t background: #182024; 
 
\t margin: 0; 
 
} 
 

 
nav.shop ul { 
 
\t width: 960px; 
 
\t list-style-type: none; 
 
\t margin: 0 auto; 
 
\t padding: 0; 
 
} 
 

 
nav.shop ul li { 
 
\t display: inline-block; 
 
\t vertical-align: top; 
 
\t padding-left: 25px; 
 
} 
 

 
nav.shop ul li h1 { 
 
\t font-size: 35px; 
 
\t margin-right: 20px; 
 

 
} 
 

 
nav.shop ul li h2 { 
 
\t color: #fff; 
 
\t text-decoration: none; 
 
\t font-size: 35px; 
 
\t margin-left: 10px; 
 
} 
 

 
nav.shop ul li a { 
 
\t color: #fff; 
 
\t text-decoration: none; 
 
\t font-size: 35px; 
 
\t padding-bottom: 10px; 
 
\t padding-top: 10px; 
 
\t display: block; 
 
} 
 

 
.shopDrop { 
 
\t position: absolute; 
 
\t background: #182024; 
 
\t padding: 30px 10px 0 10px; 
 
\t margin-top: -30px; 
 
\t border-bottom-right-radius: 10px; 
 
\t 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 { 
 
\t display: none; 
 
\t width: 150px; 
 
\t background: #1C262A; 
 
\t text-align: center; 
 
\t padding: 0; 
 
\t color: #fff; 
 
} 
 

 
.shopHoverInfo h3 { 
 
\t font-size: 17px; 
 
\t background: #CA2525; 
 
\t margin: 0; 
 
\t padding: 5px; 
 
\t border-top-right-radius: 10px; 
 
\t border-top-left-radius: 10px; 
 
} 
 

 
.shopHoverInfo h4 { 
 
\t font-size: 17px; 
 
\t margin: 0; 
 
\t background: #EED634; 
 
} 
 

 
.shopHoverInfo p { 
 
\t font-size: 15px; 
 
}

<nav class="shop"> 
 
\t <ul> 
 
\t \t <li><h1>SHOP</h1></li> 
 
\t \t <li> 
 
\t \t \t <h2 href="#" id="shopMultiplier"><a href="#">Multiplier</a></h2> 
 
\t \t \t <div class="shopDrop"> 
 
\t \t \t \t <a href="#" id="doublePoints">Double knowledge <span>&#x2606;</span></a> 
 
\t \t \t \t <div class="shopHoverInfo"> 
 
\t \t \t \t \t <h3>Double Knowledge</h3> 
 
\t \t \t \t \t <h4>Price: <span id="shopDoublePrice"></span> knowledge</h4> 
 
\t \t \t \t \t <p>When you click you get 2x knowledge</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <a href="#" id="triplePoints">Triple knowledge <span>&#x2606;</span></a> 
 
\t \t \t \t <div class="shopHoverInfo"> 
 
\t \t \t \t \t <h3>Triple Knowledge</h3> 
 
\t \t \t \t \t <h4>Price: <span id="shopTriplePrice"></span> knowledge</h4> 
 
\t \t \t \t \t <p>When you click you get 3x knowledge</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <a href="#" id="quadruplePoints">Quadruple knowledge <span>&#x2606;</span></a> 
 
\t \t \t \t <div class="shopHoverInfo"> 
 
\t \t \t \t \t <h3>Quadruple Knowledge</h3> 
 
\t \t \t \t \t <h4>Price: <span id="shopQuadruplePrice"></span> knowledge</h4> 
 
\t \t \t \t \t <p>When you click you get 4x knowledge</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </li> 
 

 
\t \t <li><h2 href="#" id="shopAutoclicker"><a href="#">Auto-clicker</a></h2></li> 
 
\t \t <li> 
 
\t \t \t <h2 href="#" id="shopFarms"><a href="#">Farms</a></h2> 
 
\t \t \t <div class="shopDrop"> 
 
\t \t \t \t <a href="#" id="simpleminds">Simple mind's <span></span></a> 
 
\t \t \t \t <div class="shopHoverInfo"> 
 
\t \t \t \t \t <h3>Simple Mind</h3> 
 
\t \t \t \t \t <p>Simple mind farms 1 knowledge each second.</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <a href="#" id="intelligentminds">intelligent mind's <span></span></a> 
 
\t \t \t \t <div class="shopHoverInfo"> 
 
\t \t \t \t \t <h3>Intelligent Mind</h3> 
 
\t \t \t \t \t <p>Intelligent mind farms 2 knowledge each second.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <h2 href="#" id="shopSkills"><a href="#">Skills</a></h2> 
 
\t \t \t <!-- <div class="shopDrop"> 
 
\t \t \t \t <a href="#" id="simpleminds">Simple mind's <span></span></a> 
 
\t \t \t </div> --> 
 
\t \t </li> 
 
\t </ul> 
 
</nav> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

あなたのニーズに応じてHTMLを作成するために容易になるだろう。お役に立てれば。