带有下拉菜单的Nav非常小故障

Question

我在一个网站上学习有关javascript的更多信息，但我不知道如何解决此问题。 如果您查看混蛋并尝试使用自己的导航，您会知道我在说什么（如果不是，请将鼠标悬停在“乘数”上，然后单击“四倍”）。 另外.slideUp（）似乎有故障，我也不知道为什么。 我希望它看起来像它从导航滑下来，然后滑回导航。

那么您将如何解决这两个问题？ 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> 

根据您的需求制作HTML会更容易。 希望这可以帮助。