延迟 Hover 在下拉菜单中 Javascript CSS

Question

我在导航栏内创建悬停下拉菜单时遇到了一些麻烦。 我是 javascript 和 css 的新手，但有其他语言的背景。 我不知道如何延迟我的下拉菜单变得可见。 现在，我的下拉菜单会立即显示您在父菜单上输入 hover 的那一刻。 我将其用于描述模板，这将是解决此问题的理想选择。

我试过使用转换并调整我的代码，我找不到正确的方法来做到这一点。 我怀疑原因之一是显示：块。 我遗漏了任何用于实现延迟的代码。 这是菜单的原始代码。

这是我的代码：

                        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;
                        }

Answer 1

在 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 。