How to make my nav bar responsive

Question

I would like to use media query to make my navbar responsive.

@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>

But it didn't work. What am i doing wrong?

Answer 1

This should work:

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

Note that IE8 and below don't support media queries.