Why does the menu disappear when switching from responsive to desktop?

Question

Iron

Actually the problem is in the menu itself, it turns into a rectangle and in the desktop when diplay:table; и т дit becomes a line, but after it opens on any device it just disappears. This is a patient example: https://geyanpeaple.github.io/menu/

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<header> 
 <h3> Это заголовок сайта</h3>
  <p>это слоган сайта</p>
  <p class="show">menu</p>
<menu> 
  <ul> 
    <li><a href="">Главная</a></li>
    <li><a href="">Гостевая</a></li>
    <li><a href="">Наш адресс</a></li>
    <li><a href="">О нас</a></li>
    <span>Закрыть</span>
  </ul>
</menu>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

*{
  margin:0;
  padding:0;
  list-style:none;
  text-decoration:none;
}
header{
  display:block;
  width:90%;
  height:200px;
  margin:5px auto;
  position:relative;
  box-shadow:0 0 1px #cc0000;
}
menu{
  display:table;
  margin:auto;
  position:absolute;
  bottom:0;
}
menu ul{
  display:table-row;
}
menu ul li{
  display:table-cell;
  text-align:center;
}
menu ul li a{
  display:table-cell;
  width:1000px;
  height:50px;
  vertical-align:middle;
  background:-webkit-linear-gradient(#cc0000,#fefefe,#cc0000);
  color:#111;
}
menu ul span{
  display:none;
}
.show{
  width:100px;
  text-align:center;
  padding:5px 0;
  background:lightblue;
  color:#fefefe;
  font-weight:800;
  cursor:pointer;
  display:none;
}
@media screen and (max-width:640px){
  html,body{
    height:100%;
  }
  header{
    position:static;
  }
  menu{
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    width:100%;
    height:100%;
    background:#000;
    display:none;
  }
  menu ul,menu ul li{
    display:block;
  }
  menu ul li a{
    background:-webkit-linear-gradient(#999,#111);
    color:#fefefe;
  }
  menu ul span{
    display:block;
    color:#fff;
  }
  .show{
    display:block;
    position:fixed;
    right:32px;
    top:6px;
  }
}

$(document).ready(function(){
    $(".show").click(function(){
        $("menu").show();
    });
    $("menu ul span").click(function(){
        $("menu").hide();
    });
});

actually there is nothing abstruse in it,
codepen

Answer 1

Remote IR receiver. Most likely, either a tuner or a media set-top box is hidden behind the TV, and so that the remote control can communicate with it, a receiver is placed in a prominent place.

Answer 2

That's right, you used the hide function on the menu (which is display: none ), so it's gone.
Ways to solve the problem:
1. Use a separate menu for the mobile version and hide only it with the hide function
2. Change the order of your css code, so that would first be the code for mobile devices and then for the desktop, and add to the display property on the desktop important.
Example:

.menu {
/* код для моб. устройств */
}

@media (min-width: 666px) {
  .menu {
    display: table !important;
    /* код для десктопа */
  }
}

3. Find another way to hide / show the menu on the mobile. devices