在悬停它时随机翻转子菜单

Question

根据我的代码，我创建了一个由<header>和<image>组成的<navigation>。到目前为止，这一切都很完美。

现在，1.0 Main Menu包含Sub-Menu SlideDown ，一旦您将其悬停。

大多数情况下，这个SlideDown功能没有任何问题，但时不时 Sub-Menu不知何故不断翻转并强行。当您在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">	

      <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。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;