Hover submenu doesn't stay opened - html

Question

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 wrote is at down below. Please check it and correct it.
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;
}
.list li {
display: inline-block;
margin: 20px;
}
.list>li:hover ul {
display: list-item;
opacity: 1;
}
.list>li:hover>a {
color: red;
}
.sub_list {
margin: 0;
padding: 0;
position: absolute;
display: none;
width: 100%;
height: 100px;
left: 0;
top: 50px;
text-align: center;
opacity: 0;
transition: all 0.5s;
}
.sub_list li {
display: inline-block;
margin: 20px;
}
.sub_list li a:hover {
color: red;
}
<div class="wrap">
<ul class="list">
<li>list-1
<ul class="sub_list">
<li>sublist-a</li>
<li>sublist-b</li>
<li>sublist-c</li>
</ul>
</li>
<li>list-2</li>
<li>list-3</li>
<li>list-4</li>
<li>list-5</li>
</ul>
</div>
I'd like to make submenu stay visible when mouse is on whole area of submenu div(100% width of screen).
please help
thank you

Answer 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;
}
.list li {
display: inline-block;
padding: 20px;
}
.list > li:hover ul {
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_list li {
display: inline-block;
margin: 20px;
}
.sub_list li a:hover {
color: red;
}
<div class="wrap">
<ul class="list">
<li>list-1
<ul class="sub_list">
<li>sublist-a</li>
<li>sublist-b</li>
<li>sublist-c</li>
</ul>
</li>
<li>list-2
<ul class="sub_list">
<li>sublist-a</li>
<li>sublist-b</li>
<li>sublist-c</li>
</ul>
</li>
<li>list-3
<ul class="sub_list">
<li>sublist-a</li>
<li>sublist-b</li>
<li>sublist-c</li>
</ul>
</li>
<li>list-4
<ul class="sub_list">
<li>sublist-a</li>
<li>sublist-b</li>
<li>sublist-c</li>
</ul>
</li>
<li>list-5
<ul class="sub_list">
<li>sublist-a</li>
<li>sublist-b</li>
<li>sublist-c</li>
</ul>
</li>
</ul>
</div>

Answer 2

I fixed the issue for you: https://codepen.io/anon/pen/rboPLE
This is what i changed:
.list li {
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.

Answer 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: 50px 0 0;
padding: 0;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 50px;
text-align: center;
}
.list > li:hover ul {
margin-top:0;
opacity: 1;
visibility: visible;
}
use this code its work perfect transition effect and dropdown submenu issues is solved.