CSS:active无法触发菜单展开，JS切换类方案失效问题求助

出于兴趣制作网站滑动菜单，先是尝试用CSS的:active实现菜单展开但失败，之后改用JS切换类名的方案仍然无效。已检查代码、文件及图片路径，使用Firefox浏览器，后续计划将菜单与PHP代码结合。

相关代码 #

HTML代码 #

<div class="top">
    <div class="solmenuac" onclick="toggleMenu()">
        <img src="images/menu.png" class="menuxx" >
        <img src="images/menuhover.png" class="menuyy">
    </div>
</div>

<div class="solmenu"></div>


<script>
function toggleMenu() {
  var menu = document.querySelector('.solmenu');
  menu.classList.toggle('solmenu-active');
}
</script>

</body>
</html>

CSS代码 #

}
:root{
    --d1: #000000;
    --d2: #111111;
    --d3: #232323;
    --d4: #343434;
    --d5: #464646;
    --d6: #575757;
    --d7: #696969;
    --d8: #7A7A7A;

    --dblue: #22223B;
    --lblue: #4A4E69;
    --lila: #9A8C98;
    --greyf: #C9ADA7;
    --icec: #F2E9E4;
}
body{
    background-color: var(--d3);
}
.top{
    position: fixed;
    width: 100%;
    height: 7vh;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: var(--d2);
}
.solmenuac{
    display: flex;
    position: absolute;
    width: 5vh;
    height: 5vh;
    margin: 1vh 0 0 1vh;
    cursor: pointer;
}
.menuyy{
    display: none;
}
.solmenuac:hover .menuxx{
    display: none;
}
.solmenuac:hover .menuyy{
    display: block;
}
.solmenu{
    position: fixed;
    width: 15vh;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    display: none;
}
.solmenu-active {
    display: grid;
    z-index: 10;
}
</style>

问题原因及修复方案 #

1. CSS语法错误（核心问题） #

CSS代码最开头的多余}会导致浏览器解析CSS时触发语法错误，后续样式大概率无法正常生效。直接删除这个多余的}即可。

2. 选择器权重不足 #

单独的.solmenu-active类选择器权重和.solmenu相同，可能无法有效覆盖原有的display: none样式。修改选择器为.solmenu.solmenu-active，提高权重确保样式生效：

.solmenu.solmenu-active {
    display: grid;
    z-index: 10;
}

3. 补充：CSS :active方案失效的本质原因 #

:active伪类仅在元素被点击按住时生效，松开鼠标后就会恢复原样，无法实现菜单持久展开的效果，因此这种方案本身就不适合用于需要保持展开状态的菜单，JS切换类名的方案是正确的选择。

内容的提问来源于stack exchange，提问作者Basic Donut