Menu
I'm using a hover effect to show or hide a submenu with CSS. Before version 56 of Google Chrome, it worked pretty fine. With the new version (Version 56.0.2924.76 (64-bit)), however, if your submenu has a scroll bar and you move the mouse over the scrollbar, the hover effects ends. Is there something new on this?
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display: none;
border: 1px solid silver;
width: 200px;
height: 100px;
overflow: auto;
}
li:hover > .wrapper {
display: block;
}
</style>
</head>
<body>
<ul>
<li>
Options
<ul class="wrapper">
<li>Sub</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
<li>Sub 5</li>
<li>Sub 6</li>
<li>Sub 7</li>
<li>Sub 8</li>
<li>Sub 9</li>
</ul>
</li>
</ul>
</body>
</html>
501
asked Jan 31 '26 14:01
Here's a better demonstration of the problem:
.wrapper {
/*display: none;*/
border: 1px solid silver;
width: 200px;
height: 100px;
overflow: auto;
background: #C55;
}
li:hover > .wrapper {
background: #5C5;
}<ul>
<li>
Options
<ul class="wrapper">
<li>Sub</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
<li>Sub 5</li>
<li>Sub 6</li>
<li>Sub 7</li>
<li>Sub 8</li>
<li>Sub 9</li>
</ul>
</li>
</ul>The only way I can see to get around it is to use a custom, webkit scrollbar. use ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb. Not the best solution, but if it's a temporary bug, it may do the trick to hold you over until they fix it.
.wrapper {
/*display: none;*/
border: 1px solid silver;
width: 200px;
height: 100px;
overflow: auto;
background: #C55;
}
li:hover > .wrapper {
background: #5C5;
}
::-webkit-scrollbar {
background: rgba(0,0,0,0.1);
width: 10px;
}
::-webkit-scrollbar-thumb{
background-color:rgba(255,255,255,0.8);
border-radius:10px;
}<ul>
<li>
Options
<ul class="wrapper">
<li>Sub</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
<li>Sub 5</li>
<li>Sub 6</li>
<li>Sub 7</li>
<li>Sub 8</li>
<li>Sub 9</li>
</ul>
</li>
</ul>It seems to be a chrome bug. Try modifing the UL line as follows:
EDITED This code works better
<ul class="wrapper" onmouseenter="this.style.display='block';" onmouseleave="this.style.display='';">
It is not very clean but it works
My best regards!
30
answered Feb 03 '26 06:02
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
