Michi Michi - 1 month ago 7
CSS Question

Random flipping of sub-menu when hover it

With my code below I created a

<header>
consisting of an
<image>
and a
<navigation>
. All this works perfectly so far.

Now, the
1.0 Main Menu
consists of a
Sub-Menu
that SlideDown once you hover it.

Most of the time this SlideDown function works without any issue but every now and then the
Sub-Menu
somehow keeps flipping back and force. This mainly happens when you go with the mouse on the
1. Main Menu
and then you move the cursor immediately to the
1.3 Menu
.

It is very difficult to explain this behaviour because it does not happen always but I hope you can see it in my code.

You can also find my code here.

What do I have to change in my code to avoid this random flipping of the
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 Source

There is no need of js for simple dropdown, you can make it with pure css only.

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>