javascript - 调整大小时的 CSS + Jquery SlideToggle 菜单问题

Question

谁能告诉我为什么当我调整窗口大小时我的链接消失了。

1. 我从小(移动)窗口开始。点击菜单，关闭菜单。
2. 将窗口调大，链接全部消失。如果我刷新页面，它们会重新出现。

我不知道是 jquery 还是 css 哪里出错了...

$(document).ready(function() {
  $('.openmenu').click(function() {
    $('#menu>ul').slideToggle(100);
    var $this = $(this);
    $this.toggleClass('openmenu');
    if ($this.hasClass('openmenu')) {
      $this.html('☰');
    } else {
      $this.html('✕');
    }
  });
});

#menu {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #FFF;
  background-color: #000;
  cursor: pointer;
  height: 40px;
}

.omstyle {
  font-size: 1.5em;
  padding-left: 10px;
  line-height: 40px;
}

#menu ul {
  display: none;
  background-color: #333;
}

#menu ul li {
  padding: 10px;
  border-top-width: 1px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #666;
  border-right-color: #666;
  border-bottom-color: #666;
  border-left-color: #666;
  float: none;
}

#menu ul li a {
  color: #FFF;
  text-decoration: none;
}

@media screen and (min-width: 469px) {
  .omstyle {
    display: none;
  }
  #menu ul {
    display: block;
  }
  #menu ul li {
    float: left;
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <div class="omstyle">
    <div class="openmenu">&#9776;</div>
  </div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Diet</a></li>
    <li><a href="#">Skin</a></li>
    <li><a href="#">Digestion</a></li>
    <li><a href="#">Hair</a></li>
    <li><a href="#">For Men</a></li>
  </ul>
</div>

Answer 1

考虑到媒体查询，jquery 脚本似乎没有应用规则。解决，修改媒体查询如下

@media screen and (min-width: 469px) {
  .omstyle {
    display: none;
  }
  #menu ul {
     display: block !important; /* ADD IMPORTANT*/
  }
  #menu ul li {
    float: left;
    display: block;
  }
}