在下拉菜单Javascript CSS中延迟悬停

如何解决在下拉菜单Javascript CSS中延迟悬停

在导航栏中创建可悬停的下拉菜单时遇到了一些麻烦。我对javascript和CSS很陌生，但是有其他语言的背景。我无法弄清楚如何延迟下拉菜单显示。现在，我的下拉菜单会立即显示您将鼠标悬停在父菜单上的那一刻。我正在使用它作为描述模板，非常适合解决此问题。

我尝试使用转换并调整代码，但找不到合适的方法。我怀疑显示的原因之一是：块。我遗漏了试图实现延迟的任何代码。这是菜单的原始代码。

这是我的代码：

                        ul{
                            border-style: groove;
                            padding: 0;
                            list-style: none;
                            background: #f2f2f2;
                        }
                        ul li{
                            display: inline-block;
                            position: relative;
                            line-height: 21px;
                            text-align: left;
                        }
                        ul li a{
                            display: block;
                            padding: 8px 25px;
                            color: #333;
                            text-decoration: none;

                        }
                        ul li a:hover{
                            color: #fff;
                    background-color:#939393;
                  
                        }
                        ul li ul.dropdown{
                            min-width: 100%; /* Set width of the dropdown */
                            background: #f2f2f2;
                            display: none;
                            position: absolute;
                            z-index: 999;
                            left: 0;
                        }
                        ul li:hover ul.dropdown{
                            display: block; /* Display the dropdown */
                        }
                        ul li ul.dropdown li{
                            display: block;
                        }

解决方法

在CSS中：

ul li ul.dropdown.show{
  display:block;
}

在JavaScript中：

const dropdowns = document.querySelectorAll('ul li ul.dropdown');
for(let q of dropdowns){
  q.onmouseenter = function(){
    setTimeout(()=>{ 
      this.classList.add('show'); 
    },1000);
  }
  q.onmouseleave = function(){
    this.classList.remove('show');
  }
}

这只是一个基本概念。我会使用CSS transition。