Hover Submenu Doesn't Stay Opened

I made full width dropdown submenu. the problem is that submenu disappears when I try to move mouse from mainlist to submenu. Also, transition on submenu is not applied. Code I wro

Solution 1:

In addition to the problem regarding margin/padding/positioning addressed in other answers, the transition wouldn't work because you can't transition from display: none; to another state or vice versa. Instead, solely rely on opacity and add the pointer-events property so that the submenu will not itself trigger the hover or overlay any other content when it's hidden.

Here's the fully working code:

body {
  margin: 0;
  padding: 0;
}

ul, li, a {
  list-style: none;
  text-decoration: none;
}

.wrap {
  position: relative;
  width: 100%;
  height: 100px;
}

.list {
  margin: 0;
  padding: 0;
  width: 100%;
  left: 0;
  top: 100px;
  height: 100px;
  text-align: center;
}

.listli {
  display: inline-block;
  padding: 20px;
}

.list > li:hoverul {
  pointer-events: all;
  opacity: 1;
}

.list > li:hover > a {
  color: red;
}

.sub_list {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100px;
  left: 0;
  top: 50px;
  text-align: center;
  opacity: 0;
  transition: all 0.5s;
  pointer-events: none;
}

.sub_listli {
  display: inline-block;
  margin: 20px;
}

.sub_listlia:hover {
  color: red;
}

<divclass="wrap"><ulclass="list"><li><ahref="#">list-1</a><ulclass="sub_list"><li><ahref="#">sublist-a</a></li><li><ahref="#">sublist-b</a></li><li><ahref="#">sublist-c</a></li></ul></li><li><ahref="#">list-2</a><ulclass="sub_list"><li><ahref="#">sublist-a</a></li><li><ahref="#">sublist-b</a></li><li><ahref="#">sublist-c</a></li></ul></li><li><ahref="#">list-3</a><ulclass="sub_list"><li><ahref="#">sublist-a</a></li><li><ahref="#">sublist-b</a></li><li><ahref="#">sublist-c</a></li></ul></li><li><ahref="#">list-4</a><ulclass="sub_list"><li><ahref="#">sublist-a</a></li><li><ahref="#">sublist-b</a></li><li><ahref="#">sublist-c</a></li></ul></li><li><ahref="#">list-5</a><ulclass="sub_list"><li><ahref="#">sublist-a</a></li><li><ahref="#">sublist-b</a></li><li><ahref="#">sublist-c</a></li></ul></li></ul></div>

Solution 2:

I fixed the issue for you: https://codepen.io/anon/pen/rboPLE This is what i changed:

.listli {
        display: inline-block;
        padding: 20px; // this line was margin: 20px; before
    }

When trying to reach the submenu you left the .list li item because it had a margin. With Padding the space belongs to the element and its still hovered when you move the mouse to submenu.

I colored the example in the link above so you can see the elements boundaries.

Solution 3:

your code is perfect but minor issues is there.

use this css code:

.sub_list {
  opacity: 0;
  transition-duration: 200ms;
  transition-timing-function: ease-in;
  transition-property: opacity, margin-top, visibility;
  visibility: hidden;
  margin: 50px00;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 50px;
  text-align: center;
}

.list > li:hoverul {
    margin-top:0;
    opacity: 1;
    visibility: visible;
}

use this code its work perfect transition effect and dropdown submenu issues is solved.