取消fadeToggle的闪烁

Question

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="Button">Button
  <div class="FadeItem">
    <ul>                    
      <li>Main Menu A </li>
      <li class="Button">Main Menu B
        <div class="FadeItem">
          <ul>
            <li>Sub Menu B</li>
            <li>Sub Menu B</li>
          </ul>
        </div>  
      </li> 
    </ul>       
  </div>        
</div>  

CSS：

.button{
  float: left;
}

.FadeItem{
  display: none;
}

jQuery：

$(document).ready(function () {
  $(".Button").hover(function(){
    $(".FadeItem").fadeToggle(500);
  });
});

如您所见，上面的简单代码在某些项目的内容中淡出。问题是当我将光标放在它闪烁的淡入内容上时，但我希望内容不闪烁地显示。

你知道我需要在我的代码中更改什么来取消闪烁吗？

https://jsfiddle.net/0tfuobpw/1/

Answer 1

更新：

为此，您不需要 js：D

.FadeItem{
  display:none;
  transition: all 0.5s ease;
}
.Button:hover>.FadeItem{
  display:block;
  transition: all 0.5s ease;
}

<div class="Button">Button

	<div class="FadeItem">
	
		<ul>					
			<li>Main Menu A </li>
			<li class="Button">Main Menu B
		
				<div class="FadeItem">
					<ul>
						<li>Sub Menu B</li>
						<li>Sub Menu B</li>
					</ul>
				</div>	
				
			</li>	
			
		</ul>	
		
	</div>	
	
</div>