如何使我的导航栏响应

Question

我想使用媒体查询来使我的导航栏响应。

@media screen and (max-width: 600px) {
  .nav-wrap {
    position: relative;
    min-height: 40px;
  }
  .nav-wrap ul {
    position: absolute;
  }
  .nav-wrap li {
    display: none; /* hide all <li> items */
    margin: 0;
  }
  .nav-wrap .current_page_item {
    display: block; /* show only current <li> item */
  }
  .nav-wrap ul:hover li {
    display: block;
    margin: 0 0 5px;
  }
}

<div class="wrap">
  <div class="nav-wrap">
    <ul class="group" id="example-one">
      <li class="current_page_item"><a href="#">Home</a></li>
      <li><a href="#">Movies</a></li>
      <li><a href="#">EVENTS</a></li>
      <li><a href="#">Booking</a></li>
      <li><a href="#">Sign In</a></li> 
      <li><a href="#">Theatres</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>                                   
  </div>
</div>

但它没有用。我做错了什么？

Answer 1

这应该有效：

@media only screen and (max-width: 600px) {
    (...)
}

请注意，IE8及以下版本不支持媒体查询。