I don't understand the nesting of classes/selectors in css

I make a menu that should pop up when the screen is smaller than the specified one. Everything works as it should, the question is, why do the styles from the medizapros work only if you write it as it is now - div. menu li? For example, you will understand everything (a medical question at the very end of CSS styles)

$(function() {

  $('#hideButton').click(function() {
    $("#mySidenav").css("width", "367px");
    $("#hideButton").fadeOut(10);
  });

  $('.closeBtn').click(function() {
    $("#mySidenav").css("width", "0");
    $("#hideButton").fadeIn(3000);
  });

});

.menu li {
  min-width: 6px;
  display: block;
  position: fixed;
  top: 13px;
  left: 1rem;
  color: #acc;
  font-size: 2rem;
  z-index: 1;
  visibility: hidden;
}

.menu li:hover {
  cursor: pointer;
  /*background-color: black;
border: 1px solid black;
-webkit-border-radius: ;
        border-radius: 100%;*/
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(42, 101, 130, 0.56);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #ccc;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
  text-shadow: 0 0 30px lightgrey;
  /*background-color: rgba(42, 101, 130, 0.69);*/
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-width: 544px) {
  div.menu li {
    visibility: visible;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div class="menu">
  <ul id="hideButton">
    <li> &#9776;</li>
    <li> &#9776;</li>
    <li> &#9776;</li>
  </ul>
</div>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closeBtn">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

Just using the poke method, I managed to find the right combination, I always wanted to know exactly how this "nesting" works, or what is it called? that is, why exactly only the div.menu li combination is triggered? and what is important if only without a space between div and. menu why doesn't applying only class or class and li (.menu li) work?