ホバーしたときにサブメニューがランダムに反転する

Question

私のコードでは、<image>と<navigation>からなる<header>を作成しました。すべてこれまで完全に動作します。あなたがそれを置く一度

は今、1.0 Main MenuはSub-MenuそのSlideDownで構成されています。

何とかSub-Menuは背中と力ひっくり返す続けこのSlideDown機能は、すべての今して任意の問題なく動作しますが、ほとんどの時間。これは、主に1. Main Menuにマウスを移動し、を1.3 Menuにすぐに移動すると発生します。

いつも起こるわけではないので、この動作を説明するのは非常に難しいですが、私のコードで見ることができれば幸いです。

私のコードhereもあります。

Sub-Menuのこのランダムなフリップを避けるために、コード内で何を変更する必要がありますか？

$(document).ready(function() { 
 
    $(".button").mouseenter(function() { 
 
    $(this).children(".SlideItem").slideDown(500); 
 
    }); 
 
    $(".button").mouseleave(function() { 
 
    $(this).children(".SlideItem").slideUp(500); 
 
    }); 
 
});

body { 
 
margin: 0; 
 
} 
 

 
.header { 
 
width: 80%; 
 
height: 10%; 
 
margin-left: 10%; 
 
display: flex; 
 
justify-content: space-between; 
 
position: fixed; 
 
top: 0; 
 
box-sizing: border-box; 
 
border-style: solid; 
 
border-width: 1px; 
 
background-color: yellow; 
 
} 
 

 
.image { 
 
width: 30%; 
 
height: 100%; 
 
display: flex; 
 
justify-content: center; 
 
text-align:center; 
 
align-items: center; 
 
box-sizing: border-box; 
 
border-style: solid; 
 
border-width: 1px; 
 
background-color: green; 
 
} 
 

 
.navigation { 
 
width: 70%; 
 
height: 100%; 
 
box-sizing: border-box; 
 
border-style: solid; 
 
border-width: 1px; 
 
} 
 

 
.navigation > ul { 
 
height: 100%; 
 
display: flex; 
 
list-style: none; 
 
margin: 0; 
 
padding: 0; 
 
box-sizing: border-box; 
 
border-style: solid; 
 
border-width: 1px; 
 
background-color: blue; 
 
} 
 

 
.navigation > ul > li { 
 
width: 100%; 
 
display: flex; 
 
justify-content: center; 
 
text-align:center; 
 
align-items: center; 
 
box-sizing: border-box; 
 
border-style: solid; 
 
border-width: 1px; 
 
} 
 

 
.content{ 
 
width: 80%; 
 
margin-top: 10%; 
 
margin-left: 10%; 
 
box-sizing: border-box; 
 
border-style: solid; 
 
border-width: 1px; 
 
background-color: red; 
 
} 
 

 
.SlideItem { 
 
display: none; 
 
} 
 

 
.button { 
 
position: relative; 
 
} 
 

 
.SlideItem { 
 
    width: 100%; 
 
    position:absolute; 
 
    top:100%; 
 
    left:0; 
 
    padding:0; 
 
    margin:0; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: lime; 
 
} 
 

 
.SlideItem li { 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="header"> \t 
 

 
     <div class="image"> 
 
     Image 
 
     </div> 
 
    
 
     <nav class="navigation"> 
 
     <ul> 
 
      <li class="button"> 1.0 Main Menu 
 
      <ul class="SlideItem"> 
 
       <li> 1.1 Sub Menu </li> 
 
       <li> 1.2 Sub Menu </li> 
 
       <li> 1.3 Sub Menu </li>  
 
      </ul> 
 
      </li> 
 
      <li> 2.0 Main Menu </li> 
 
      <li> 3.0 Main Menu </li> 
 
     </ul> 
 
     </nav> 
 
     
 
</div>

Answer 1

シンプルなドロップダウンのためのjsの必要はありません、あなただけの純粋なCSSでそれを作ることができます。

body { 
 
    margin: 0; 
 
} 
 

 
.header { 
 
    width: 80%; 
 
    height: 10%; 
 
    margin-left: 10%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    position: fixed; 
 
    top: 0; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: yellow; 
 
} 
 

 
.image { 
 
    width: 30%; 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    text-align: center; 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: green; 
 
} 
 

 
.navigation { 
 
    width: 70%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 

 
.navigation>ul { 
 
    height: 100%; 
 
    display: flex; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: blue; 
 
} 
 

 
.navigation>ul>li { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    text-align: center; 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 

 
.content { 
 
    width: 80%; 
 
    margin-top: 10%; 
 
    margin-left: 10%; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: red; 
 
} 
 

 
.button { 
 
    position: relative; 
 
} 
 

 
.SlideItem { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: lime; 
 
    max-height:0px; 
 
    overflow:hidden; 
 
    transition: max-height .5s linear; 
 
} 
 

 
.button:hover .SlideItem { 
 
    max-height: 100px; 
 
} 
 

 
.SlideItem li { 
 
    display: block; 
 
}

<div class="header"> 
 
    <div class="image">Image</div> 
 
    <nav class="navigation"> 
 
    <ul> 
 
     <li class="button"> 1.0 Main Menu 
 
     <ul class="SlideItem"> 
 
      <li> 1.1 Sub Menu </li> 
 
      <li> 1.2 Sub Menu </li> 
 
      <li> 1.3 Sub Menu </li> 
 
     </ul> 
 
     </li> 
 
     <li> 2.0 Main Menu </li> 
 
     <li> 3.0 Main Menu </li> 
 
    </ul> 
 
    </nav> 
 
</div> 
 
<div class="content"></div>