Javascript 下拉菜单没有'；不要在悬停状态下降落 产品 .下拉菜单{ 位置：相对位置； 显示：内联块； } .dropbtn{ 填充：14px 16px； 字体大小：16px； 边界：无； 大纲：无； 保证金：0； &：悬停{ 背景色：$活动暗颜色； 光标：指针； } } .下载内容{ 显示：无； 位置：绝对位置； 背景色：$活动暗颜色； 最小宽度：160px； 盒影：0px 8px 16px 0px rgba（0,0,0,0.2）； z指数：1； &：悬停{ 显示：块； 光标：指针； } a{ 浮动：无； 文本对齐：左对齐； 填充：12px 16px； 文字装饰：无； 显示：块； &：悬停{ 背景色：$活动暗颜色； 光标：指针； } } }

这是我的代码，当前当我将鼠标悬停在上面时，它似乎没有将显示更改为阻止，我不知道为什么。假设它是位于导航栏顶部的下拉菜单，当我悬停时，链接1和链接2将下拉，但现在当我悬停时，产品按钮会改变颜色。我对前端非常陌生，因此非常感谢您的帮助。

在css中添加一行（额外的选择器），以便在悬停时打开子菜单。在纯css中：

                            <li className={styles.link + " " + styles.hideOnMobile}>
                            <div className={styles.dropdownMenu}>
                                <button className={styles.dropbtn}>Product</button>
                                <div className={styles.dropdownContent}>
                                    <a
                                        href="#"
                                        onClick={this._trackClick.bind(this, "header")}
                                    >
                                        Link 1
                                    </a>
                                    <a
                                        href="#"
                                        onClick={this._trackClick.bind(this, "header")}
                                    >
                                        Link 2
                                    </a>
                                </div>
                            </div>
                        </li>


.dropdownMenu {
    position: relative;
    display: inline-block;
}

.dropbtn {  
    padding: 14px 16px;     
    font-size: 16px;
    border: none;
    outline: none;
    margin: 0;
    &:hover{        
        background-color: $color-active-dark;
        cursor: pointer;
    }   
}

.dropdownContent {

    display: none;
    position: absolute;
    background-color: $color-active-dark;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    &:hover {
        display: block;
        cursor: pointer;
    }
    a {
        float: none;
        text-align: left;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        &:hover{
            background-color: $color-active-dark;
            cursor: pointer;
        }
    }
}

您要求提供悬停触发器的下拉列表。这不是触摸屏的“切换”机制，因为这必须通过Javascript完成

更新

您的另一个问题：如何切换（单击打开/关闭）下拉列表

.dropdownContent:hover,
.dropbtn:hover + div {
  display: block;
  cursor: pointer;
}

---

当然，如果您有一个包含多个

项的导航，那么这个Javascript一次只能打开一个下拉列表。

您有一些html变量：

{style.dropdownContent}

。你没有把它贴在你的帖子上。它呈现了什么？我在你帖子的任何地方都找不到触发打开下拉菜单的代码。我想，你可能想用一些类似的方法来达到这个目的，比如

onMouseOver

或者诸如此类的东西。@sonic你是什么意思？我确实附加了.dropdownContent的代码。@YevgenGorbunkov我在学习W3教程，他们没有添加任何合成事件，而且似乎可以工作。重新考虑

.dropdownContent

的css。如何将

display:none

元素悬停以使其可见？

<script>
var Buttons = document.querySelectorAll(".dropbtn");
for (var i = 0; i < Buttons.length; i++) {
  Buttons[i].addEventListener("click", function(event) {
    var Divs = document.querySelectorAll(".dropdownContent");
    var Shown = (this.nextElementSibling.classList.contains("show"));
    for (var j = 0; j < Divs.length; j++) Divs[j].classList.remove("show");
    if (Shown) this.nextElementSibling.classList.remove("show");
    else this.nextElementSibling.classList.add("show");
  });
}
</script>

.dropdownContent {
  display: none;
}
.dropdownContent.show {
  display: block;
}