jquery - 悬停时随机翻转子菜单

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

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>