Why don't the class styles change when the hamburger button is clicked?

Question

css

Hello, please tell me why styles are not substituted when clicking on the hamburger button? That is, in html, the .top-nav-menu-active style is substituted, and visibility remains display: none

<script>
      $(document).ready(function() {
        var menuBtn = $('.top-nav-menu-btn');
        var topMenu = $('.menu');

        menuBtn.on('click', function(event) {
          event.preventDefault();
          topMenu.toggleClass('top-nav-menu-active');
        })
      })
    </script>

.menu {
  display: none;
}

.menu .top-nav-menu-active {
  display: block;
}

.top-nav-menu-btn {
  width: 40px;
  height: 40px;
  border: none;
  color: #fff;
  background:#6ec256;
  position: fixed;
  top: 15px;
  right: 10px;
  font-size: 18px;
  cursor: pointer;
  display: block;

}

Answer 1

.menu .top-nav-menu-activein your case the selector should be merged .menu.top-nav-menu-active
CSS selectors