CSS-only dropdown mega menu with hover delay - html

Question

I have a CSS only dropdown mega menu. Now I need to add delay on hover, but only when not already hovering a tab. The goal is to remove the delay before showing subsequent sheets - without using JavaScript. It may or or may not be possible. I have tried using sibling selector to set zero transition delay on the neighbour of the hovered element - this naturally doesn't work because the transition delay rule applies to the 'to' hover state, not the 'from' state.
body * {
outline: 1px solid black;
background-color: #0001;
}
ul {
margin: 0;
padding: 10px;
display: inline-flex;
}
li {
display: inline-block;
padding: 10px;
}
ul li div {
position: absolute;
background-color: white;
width: 200px;
height: 200px;
visibility: hidden;
transition: visibility 0s;
transition-delay: 300ms;
}
ul li:hover button {
background-color: blue;
color: white;
}
ul li:hover div {
visibility: visible;
}
ul li:not(:hover) div {
transition-delay: 0s;
}
a {
padding: 10px;
display: block;
}
a:hover {
text-decoration: none;
}
<ul>
<li>
<button>Link</button>
<div>Sheet</div>
</li>
<li>
<button>Link</button>
<div>Sheet</div>
</li>
</ul>
<a href='#'>Background link</a>

Answer 1

Is this what you want. adding transition delay on the hover state not the actual element css
ul li:hover div{visibility: visible;transition-delay: 1000ms;}
body * {
outline: 1px solid black;
background-color: #0001;
}
ul {
margin: 0;
padding: 10px;
display: inline-flex;
}
li {
display: inline-block;
padding: 10px;
}
ul li div {
position: absolute;
background-color: white;
width: 200px;
height: 200px;
visibility: hidden;
transition: visibility 0s;
}
ul li:hover button {
background-color: blue;
color: white;
}
ul li:hover div {
visibility: visible;
transition-delay: 1000ms;
}
ul li:not(:hover) div {
transition-delay: 0s;
}
a {
padding: 10px;
display: block;
}
a:hover {
text-decoration: none;
}
<ul>
<li>
<button>Link</button>
<div>Sheet</div>
</li>
<li>
<button>Link</button>
<div>Sheet</div>
</li>
</ul>
<a href='#'>Background link</a>